关于vue.config.js

简述

vue.config.js是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它就会被@vue/cli-service自动加载。你也可以使用package.json中的vue字段，但是注意这种写法需要你严格遵守JSON的格式来写。

这个文件应该导出一个包含了选项的对象：

vue.config.js

module.exports = {// 选项
}

vue.config.js

或者，也可以使用@vue/cli-service提供的defineConfig帮手函数，以获得更好的类型提示：

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({// 选项
})

vue.config.js的配置项

publicPath `部署时的基本 URL`

类型：string
默认值：“/”
用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。
默认情况下，vue-cli 会假设你的应用是被部署在一个域名的根路径上，例如https://www.baidu.com/。如果部署在一个子路径上，你就需要用这个选项指定这个子路径。例如你要部署在https://www.baidu.com/other/则设置publicPath为/other/。
publicPath这个值也可以设置为（' '）或是相对路径（' ./ '）,这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

vue.config.js

// 这个值在开发环境下同样生效module.exports = {publicPath: process.env.NODE_ENV === 'production'? '/production-sub-path/': '/'
}

outputDir `打包后生成的文件夹目录`

类型： string
默认值：dist
当运行vue-cli-service build时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除（构建时传入--no-clean可关闭该行为）

assetsDir `放置生成的静态资源的目录`

类型：string
默认值：‘’
放置生成的静态资源（js、css、img、fonts）的（相对于outputDir的）目录

indexPath `生成的index.html的输出路径`

类型：string
默认值： index.html
指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

finenameHashing `文件名是否包含哈希`

类型：string
默认值：true
默认情况下，生成的静态资源在它们的文件名中包含了hash以便更好的控制缓存。然而，这也要求index的html是被vue cli自动生成的。如果你无法使用vue cli生成index html，你可以通过将这个选项设为false来关闭文件名哈希。

productionSourceMap

类型：boolean
默认值：true
如果你不需要生产环境的source map，可以将其设置为false以加速生产环境构建。

pages

类型：object
默认值： undefind
在multi-page模式下构建应用，每个page应该有一个对应的JavaScript入口文件。其值应该是一个对象，对象的key是入口的名字，value是：
- 一个指定了entry、template、filename、title和chunks的对象（除了entry之外都是可选的）；
- 或一个指定其entry的字符串

vue.config.js

module.exports = {pages: {index: {// page 的入口entry: 'src/index/main.js',// 模板来源template: 'public/index.html',// 在 dist/index.html 的输出filename: 'index.html',// 当使用 title 选项时，// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>title: 'Index Page',// 在这个页面中包含的块，默认情况下会包含// 提取出来的通用 chunk 和 vendor chunk。chunks: ['chunk-vendors', 'chunk-common', 'index']},// 当使用只有入口的字符串格式时，// 模板会被推导为 `public/subpage.html`// 并且如果找不到的话，就回退到 `public/index.html`。// 输出文件名会被推导为 `subpage.html`。subpage: 'src/subpage/main.js'}
}

css相关配置

Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。

1、引用静态资源

所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用，并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件，或是想要用 webpack alias，则需要在路径前加上 ~ 的前缀来避免歧义。

2、预处理器

你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader：

// Sass
npm install -D sass-loader sass// Less
npm install -D less-loader less// Stylus
npm install -D stylus-loader stylus

然后你就可以导入相应的文件类型，或在 *.vue 文件中这样来使用：

<style lang="scss">$color: red;
</style>

自动化导入

如果你想自动化导入文件 (用于颜色、变量、mixin……)，你可以使用 style-resources-loader。这里有一个关于 Stylus 的在每个单文件组件和 Stylus 文件中导入 ./src/styles/imports.styl 的例子：

// vue.config.jsconst path = require('path')module.exports = {chainWebpack: config => {const types = ['vue-modules', 'vue', 'normal-modules', 'normal']types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))},
}function addStyleResource (rule) {rule.use('style-resource').loader('style-resources-loader').options({patterns: [path.resolve(__dirname, './src/styles/imports.styl'),],})
}

PostCSS

你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

CSS Modules

如果你希望自定义生成的 CSS Modules 模块的类名，可以通过 vue.config.js 中的 css.loaderOptions.css 选项来实现。所有的 css-loader 选项在这里都是支持的，例如 localIdentName 和 camelCase：

// vue.config.jsmodule.exports = {css: {loaderOptions: {css: {// 注意：以下配置在 Vue CLI v4 与 v3 之间存在差异。// Vue CLI v3 用户可参考 css-loader v1 文档// https://github.com/webpack-contrib/css-loader/tree/v1.0.1modules: {localIdentName: '[name]-[hash]'},localsConvention: 'camelCaseOnly'}}}
}

或

css: {extract: {// 打包后css文件名称添加时间戳filename: `css/[name].${timeStamp}.css`,chunkFilename: `css/chunk.[id].${timeStamp}.css`},loaderOptions: {less: {modifyVars: {/* less 变量覆盖，用于自定义 ant design 主题 */'primary-color': '#1890FF','link-color': '#1890FF','border-radius-base': '4px','layout-color': '#9867f7'},javascriptEnabled: true}}},

向预处理器 Loader 传递选项

有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有 Sass/Less 样式传入共享的全局变量：

// vue.config.js
module.exports = {css: {loaderOptions: {// 给 sass-loader 传递选项sass: {// @/ 是 src/ 的别名// 所以这里假设你有 `src/variables.sass` 这个文件// 注意：在 sass-loader v8 中，这个选项名是 "prependData"additionalData: `@import "~@/variables.sass"`},// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效// 因为 `scss` 语法在内部也是由 sass-loader 处理的// 但是在配置 `prependData` 选项的时候// `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号// 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置scss: {additionalData: `@import "~@/variables.scss";`},// 给 less-loader 传递 Less.js 相关选项less:{// http://lesscss.org/usage/#less-options-strict-units `Global Variables`// `primary` is global variables fields nameglobalVars: {primary: '#fff'}}}}
}

devServer

类型：Object
所有webpack-dev-server的选项都支持，注意：
- 有些值像host、port和https可能会被命令行参数覆写
- 有些值像publicPath和historyApiFallback不应该被改写，因为它们需要和开发服务器的publicpath同步以保障正常的工作。

devServer.proxy `dev环境下，webpack-dev-server相关配置`

类型：string/Object
如果你的前端应用和后端API服务器没有运行在同一个主机上，你需要在开发环境下将API请求代理到API服务器。这个问题可以通过vue.config.js中的devServer.proxy选项来配置。

devServer.proxy可以是一个指向开发环境API服务器的字符串

module.exports = {devServer: {proxy: 'http://localhost:4000'}
}module.exports = {devServer: {proxy: {port: 8090,host: '0.0.0.0',https: false,open: true,}}
}

port：开发运行时的端口
host：开发运行时域名，设置成 0.0.0.0 ，在同一个局域网下，如果你的项目在运行，同时可以通过你的 http://ip:port/...访问你的项目
https：是否启用https
open：npm run serve 时是否直接打开浏览器

这会告诉开发服务器将任何未知请求（没有匹配到静态文件的请求）代理到http://localhost:4000

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

module.exports = {
// 反向代理devServer: {index: '/login.html',   // 默认打开文件open: true,             // 自动打开浏览器host: 'localhost',      // 默认打开域名port: 8080,             // 默认打开端口号https: false,           // 开启关闭https请求hotOnly: false,         // 热更proxy: {// 配置跨域'/api': {target: 'http://dev.aabb.cn:8082/', // 代理地址，这里设置的地址会代替axios中设置的baseURLws: true,    // proxy websocketschangeOrigin: true, // 如果接口跨域，需要进行这个参数配置pathRewrite: {      // pathRewrite方法重写url'^/api': '/',},},},},
}

示例

vue.config.js

module.exports = {publicPath: "./", // 公共路径 默认为"/"，建议使用"./"相对路径devServer: {   // 本地服务器配置(npm run serve)port: 8080, // 端口host: "localhost", // 域名https: false, // 是否开启httpsopen: true	// 是否在开启服务器后自动打开浏览器访问该服务器},lintOnSave: false,  // 取消lint语法检测，此处可不配置outputDir:"dist", // build打包输出目录assetsDir:"assets", // 静态文件输出目录，基于distindexPath: "index.html",  // 输出html文件名productionSourceMap: false, // 取消.map文件的打包，加快打包速度configureWebpack: (config) => {// process.env为环境变量，分别对应.env.development文件和.env.production文件 此处表示加快开发环境打包速度if (process.env.NODE_ENV !== 'production') return;config.optimization.minimizer[0].options.terserOptions.compress.drop_console = false;	//生产环境去掉console.logreturn {  // 此处配置webpack.config.js的相关配置plugins: [],performance: {}};}
};

插件及规则的配置

在vue.config.js，如果要新增/修改webpack的plugins或者rules，有两种方式。

configgureWebpack方式

configgureWebpack 是相对比较简单的一种方式
- 它可以是一个对象：和webpack本身配置方式一致，该对象将会被webpack-merge 合并入最终的webpack配置
- 它也可以是一个函数：直接在函数内部进行修改配置

module.exports = {configureWebpack: {rules: [],plugins: [new MyAwesomeWebpackPlugin()]}
}configureWebpack: (config) => {// 例如，通过判断运行环境，设置modeconfig.mode = 'production'
}