vue.config.js常用配置详解

vue.config.js常用配置详解_vue.js_脚本之家 (jb51.net)

这篇文章主要介绍了vue.config.js常用配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

使用vue-cli3.0搭建项目比之前更简洁，没有了build和config文件夹。

vue-cli3的一些服务配置都迁移到CLI Service里面了，对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置

module.exports = {
 publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
}

1 module.exports = {
2  // 选项...
3 }

基本路径

baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代。

在开发环境下，如果想把开发服务器架设在根路径，可以使用一个条件式的值

1 module.exports = {
2  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
3 }

构建输出目录（打包位置）

outputDir

当运行 vue-cli-service build 时生成的生产环境构建文件的目录

1 module.exports = {
2  outputDir: 'dist',
3 }

静态资源目录

assetsDir

放置生成的静态资源 (js、css、img、fonts) 的目录

1 module.exports = {
2  assetsDir: 'assets',
3 }

eslint代码检测

是否开启eslint保存检测，有效值：ture | false | 'error'

设置为 true 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败

希望让 lint 错误在开发时直接显示在浏览器中，可以使用 lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误

webpack-dev-server 相关配置

devServer

 1   devServer: {
 2     open: true,//设置自动打开
 3     port: 1880,//设置端口
 4     proxy: {
 5       //设置代理
 6 　　　　　　'/axios': {
 7 　　　　　　　　target: 'http://101.15.22.98',
 8 　　　　　　　　changeOrigin: true,
 9 　　　　　　　　secure: false, //如果是http接口，需要配置该参数
10 　　　　　　　　pathRewrite: {
11 　　　　　　　　　　'^/axios': ''
12 　　　　　　　　　　}
13 　　　　　　　　}
14       }
15     }
16   }

 1 module.exports = {
 2   // 部署应用时的基本 URL
 3   publicPath: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080',
 4 
 5   // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
 6   outputDir: 'dist',
 7 
 8   // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
 9   assetsDir: '',
10 
11   // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
12   indexPath: 'index.html',
13 
14   // 默认在生成的静态资源文件名中包含hash以控制缓存
15   filenameHashing: true,
16 
17   // 构建多页面应用，页面的配置
18   pages: {
19     index: {
20       // page 的入口
21       entry: 'src/index/main.js',
22       // 模板来源
23       template: 'public/index.html',
24       // 在 dist/index.html 的输出
25       filename: 'index.html',
26       // 当使用 title 选项时，
27       // template 中的 title 标签需要是 
28       title: 'Index Page',
29       // 在这个页面中包含的块，默认情况下会包含
30       // 提取出来的通用 chunk 和 vendor chunk。
31       chunks: ['chunk-vendors', 'chunk-common', 'index']
32     },
33     // 当使用只有入口的字符串格式时，
34     // 模板会被推导为 `public/subpage.html`
35     // 并且如果找不到的话，就回退到 `public/index.html`。
36     // 输出文件名会被推导为 `subpage.html`。
37     subpage: 'src/subpage/main.js'
38   },
39 
40   // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader)
41   lintOnSave: process.env.NODE_ENV !== 'production',
42 
43   // 是否使用包含运行时编译器的 Vue 构建版本
44   runtimeCompiler: false,
45 
46   // Babel 显式转译列表
47   transpileDependencies: [],
48 
49   // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
50   productionSourceMap: true,
51 
52   // 设置生成的 HTML 中  和