本文共 1700 字，大约阅读时间需要 5 分钟。

Vue 配置 vue.config.js 导航

在 Vue 项目中，vue.config.js 文件是配置项目和优化工具链的重要入口。通过合理配置，可以优化构建工具链，简化开发流程，并为项目打包和部署提供个性化设置。

路径配置

在 Vue CLI 3.x 中，路径配置主要依赖于 path 模块进行处理。为了方便项目成员相对路径的管理，可以使用 path.join 方法拼接路径。

示例代码

const path = require('path');function resolve(dir) {    return path.join(__dirname, dir);}module.exports = {    lintOnSave: true,    chainWebpack(config) {        config.resolve.alias            .set('@', resolve('src'))            .set('@assets', resolve('src/assets'))            .set('@components', resolve('src/components'))            .set('@content', resolve('src/components/content'))            .set('@common', resolve('src/components/common'))            .set('@network', resolve('src/network'))            .set('@views', resolve('src/views'));        // 适当添加其他路径 Ihrer项目中需要的    }};

自定义打包入口文件

通过 chainWebpack 方法可以对不同环境下的打包入口文件进行自定义设置。此外，process.env.NODE_ENV 可以根据开发和生产环境切换配置。

chainWebpack(config) {    config.when(process.env.NODE_ENV === 'production', config => {        config.entry('app').clear().add('./src/main-prod.js')    });    config.when(process.env.NODE_ENV === 'development', config => {        config.entry('app').clear().add('./src/main-dev.js')    });}

输出目录设置

outputDir 主要是用来指定构建后的文件存储路径。默认值为 dist，即可更改为生产环境需要的格式。

参数说明

• 类型：string
• 默认值：dist

示例

module.exports = {    publicPath: './', // 生产环境下的基本路径设置    outputDir: 'dist', // 构建文件的保存目录    // ...}

请注意，outputDir 需要与 publicPath 保持一致，这样可以正确生成项目部署路径。

静态资源存储

可以通过 assetsDir 配置静态资源存储位置。资源会被存放在构建后的项目目录下的相应子目录内。

assetsDir: 'assets',

配置总结

核心选项解析

• explicit casting：为了更谨慎地控制构建过程，可以使用 use(value) 来强制一个类型的值。
• publicPath：用于指定在某种编译环境下生成的公用路径，通常用于 Basicsulf flooring 的处理。
• filenameHashing：默认情况下，构建后的 JavaScript 和 CSS 文件名中会自动生成唯一的哈希值。

欢迎根据项目需求，补充其他必要的配置！

转载地址：http://ynomz.baihongyu.com/