vue-cli3的配置参考

深碍√TFBOYSˉ_ 2021-12-15 17:51 422阅读 0赞

**目录**

目标浏览器

vue.config.js

publicPath

outputDir

assetsDir

indexPath

filenameHashing

pages

lineOnSave

runtimeCompiler

transpileDependencies

productionSourceMap

crossorigin

integrity

configureWebpack

chainWebpack

css.modules

css.extract

css.sourceMap

css.loaderOptions

devServer

devServer.proxy

parallel

pwa

pluginOptions

Babel

ESLint

TypeScript

单元测试

Jest

Mocha(配合 mocha-webpack)

E2E测试

Cypress

Nightwatch

--------------------

文档参考：

*  [Vue脚手架vue-cli 配置+打包代码切割+按需加载+路径问题+去掉map大文件+去掉格式检测][Vue_vue-cli _map]
 *  [vue-cil 3.0 配置说明][vue-cil 3.0]

## 目标浏览器 ##

请查阅指南中的[浏览器兼容性][Link 1]章节

## vue.config.js ##

vue.config.js基础模板([参考文档][Link 2])：

/**
     * *@2018-10-08
     * *@author trsoliu 
     * *@describe vue-cli 3.x配置文件
     */
    const path = require('path');
    const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟开发者工具 插件 （另：https://github.com/liriliri/eruda）
    const CompressionPlugin = require('compression-webpack-plugin'); //Gzip
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack包文件分析器
    const baseUrl = process.env.NODE_ENV === "production" ? "/static/" : "/"; //font scss资源路径 不同环境切换控制
     
    module.exports = {
    	//基本路径
    	baseUrl: './',
    	//输出文件目录
    	outputDir: 'mcdonalds',
    	// eslint-loader 是否在保存的时候检查
    	lintOnSave: true,
    	//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
    	assetsDir: 'static',
    	//以多页模式构建应用程序。
    	pages: undefined,
    	//是否使用包含运行时编译器的 Vue 构建版本
    	runtimeCompiler: false,
    	//是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建，在适当的时候开启几个子进程去并发的执行压缩
    	parallel: require('os').cpus().length > 1,
    	//生产环境是否生成 sourceMap 文件，一般情况不建议打开
    	productionSourceMap: false,
    	// webpack配置
    	//对内部的 webpack 配置进行更细粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    	chainWebpack: config => {
    		/**
    		 * 删除懒加载模块的prefetch，降低带宽压力
    		 * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
    		 * 而且预渲染时生成的prefetch标签是modern版本的，低版本浏览器是不需要的
    		 */
    		//config.plugins.delete('prefetch');
    		//if(process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
    		//} else {// 为开发环境修改配置...
    		//}
    	},
    	//调整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
    	configureWebpack: config => {
    		//生产and测试环境
    		let pluginsPro = [
    			new CompressionPlugin({ //文件开启Gzip，也可以通过服务端(如：nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)
    				filename: '[path].gz[query]',
    				algorithm: 'gzip',
    				test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$', ),
    				threshold: 8192,
    				minRatio: 0.8,
    			}),
    			//	Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer)
    			new BundleAnalyzerPlugin(),
    		];
    		//开发环境
    		let pluginsDev = [
    			//移动端模拟开发者工具(https://github.com/diamont1001/vconsole-webpack-plugin  https://github.com/Tencent/vConsole)
    			new vConsolePlugin({
    				filter: [], // 需要过滤的入口文件
    				enable: true // 发布代码前记得改回 false
    			}),
    		];
    		if(process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
    			config.plugins = [...config.plugins, ...pluginsPro];
    		} else {
    			// 为开发环境修改配置...
    			config.plugins = [...config.plugins, ...pluginsDev];
    		}
    	},
    	css: {
    		// 启用 CSS modules
    		modules: false,
    		// 是否使用css分离插件
    		extract: true,
    		// 开启 CSS source maps，一般不建议开启
    		sourceMap: false,
    		// css预设器配置项
    		loaderOptions: {
    			sass: {
    				//设置css中引用文件的路径，引入通用使用的scss文件（如包含的@mixin）
    				data: `
    				$baseUrl: "/";
    				@import '@/assets/scss/_common.scss';
    				`
                                    //data: `
                                    //$baseUrl: "/";
                                    //`
    			}
    		}
    	},
    	// webpack-dev-server 相关配置 https://webpack.js.org/configuration/dev-server/
    	devServer: {
    		// host: 'localhost',
    		host: "0.0.0.0",
    		port: 8000, // 端口号
    		https: false, // https:{type:Boolean}
    		open: true, //配置自动启动浏览器  http://172.16.1.12:7071/rest/mcdPhoneBar/ 
    		hotOnly: true, // 热更新
    		// proxy: 'http://localhost:8000'   // 配置跨域处理,只有一个代理
    		proxy: { //配置自动启动浏览器
    			"/rest/*": {
    				target: "http://172.16.1.12:7071",
    				changeOrigin: true,
    				// ws: true,//websocket支持
    				secure: false
    			},
    			"/pbsevice/*": {
    				target: "http://172.16.1.12:2018",
    				changeOrigin: true,
    				//ws: true,//websocket支持
    				secure: false
    			},
    		}
    	},
     
    	// 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
    	pluginOptions: {
    		'style-resources-loader': {//https://github.com/yenshih/style-resources-loader
    			preProcessor: 'scss',//声明类型
    			'patterns': [
                                    //path.resolve(__dirname, './src/assets/scss/_common.scss'), 
    			],
                            //injector: 'append'
    		}
    	}
    };

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

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

// vue.config.js
    module.exports = {
      // 选项...
    }

下面是配置的属性：

### **publicPath** ###

*  Type: string
 *  Default: '/ '

部署应用包时的基本URL。用法和webpack本身的output.publicPath一致，但是Vue Cli在一些其他地方也需要用到这个值，所以**请始终使用publicPath而不要直接修改webpack**的putput.publicPath。

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

这个值也可以被设置为空字符串('')或是相对路径(' ./ ')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似Cordova hybrid应用的文件系统中。

--------------------

**相对publicPath的限制**

相对路径的publicPath有一些使用上的限制。在一下情况下，应当避免使用相对publicPath:

1.  当使用基于HTML5 history.pushState的路由时； 
2.  当使用 pages 选项构建多页面应用时。

--------------------

这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径，你可以使用一个条件式的值：

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

### outputDir ###

*  Type: string
 *  Default: 'dist'

当允许 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除(构建时传入 --no-clean可关闭改行为)。

--------------------

提示：

请始终使用 outputDir而不要修改webpack 的 output.path

--------------------

### assetsDir ###

*  Type: string
 *  Default: ''

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

--------------------

提示：

从生成的index.html的输出路径(相当于 outputDir)。也可以是一个绝对路径。

--------------------

### indexPath ###

*  Type： string
 *  Default: 'index.html'

指定生成的index.html的输出路径(相对于 outputDir )。也可以是以恶搞绝对路径。

### filenameHashing  ###

*  Type: boolean
 *  default：true

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

### pages ###

*  Type：Object
 *  Default：undefined

在multi-page模式下构建应用。每个"page"应该有一个对应的JavaScript入口文件。其值应该是一个对象，对象的key是入口的名字，value是：

1.  一个指定了entry，template，filename，title和chunks的对象（除了 entry之外都是可选的);
2.  或一个指定其 entry的字符串。

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'
      }
    }

--------------------

提示：

当在multi-page模式下构建时，webpack配置会包含不一样的插件(这是会存在多个 html-webpack-plugin 和 preload-webpack-plugin的实例)。如果你试图修改这些插件的选项，请确认运行 vue inspect。

--------------------

### lineOnSave ###

*  Type：boolean | "error"
 *  Default: true

是否在开发环境下通过eslint-loader在每次保存时lint代码，这个值会在 @vue/cli-plugin-eslint被安装之后生效。

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

如果你希望让lint错误在开发时直接显示在浏览器中，你可以使用lintOnSave: 'error'。这会强制eslint-loader将lint错误输出为编译错误，同时也意味着lint错误将会导致编译失败。

或者，你可以通过设置让浏览器overlay同时显示警告和错误：

// vue.config.js
    module.exports = {
      devServer: {
        overlay: {
          warnings: true,
          errors: true
        }
      }
    }

当lintOnSave是一个truthy的值时，eslint-loader在开发和生产构建下都会被启用。如果你想要在生产构建时禁用eslint-loader，你可以用如下配置：

// vue.config.js
    module.exports = {
      lintOnSave: process.env.NODE_ENV !== 'production'
    }

### **runtimeCompiler** ###

*  Type：boolead
 *  Default: false

是否使用包含运行时编译器的Vue构建版本。设置为true后你就可以在vue组件中使用template选项了，但是这会让你的应用额外增加10kb左右。

更多细节可查阅：[Runtime + Compiler vs. Runtime only][Runtime _ Compiler vs. Runtime only]

### transpileDependencies  ###

*  Type：Array<string | RegExp>
 *  Default: \[\]

默认情况下babel-loader会忽略所有node\_modules中的文件。如果你想要通过Babel显式转译一个依赖，可以在这个选项中列出来。

### productionSourceMap  ###

*  Type：boolead
 *  Default：true

如果你不需要生产环境的source map，可以将其设置为false以加速生产环境构建。

### crossorigin ###

*  Type：string
 *  Default：undefined

设置生成的HTML中 <link rel="stylesheet"> 和 <script>标签的 crossrigin 属性。需要注意的是该选项仅影响由 html-webpack-plugin在构建时注入的标签-直接写在模板(public/index.html)中标签不受影响。

更多细节可查阅：[ CORS settings attributes][CORS settings attributes]

### integrity ###

*  Type：boolean
 *  Default： false

在生成的HTML中的 <link rel="stylesheet"> 和 <script>标签上启用Subresource Integrity(SRI)。如果你构建后的文件是部署在CDN上的，启用该选项可以提供额外的安全性。

需要注意的是改选项近影响由 html-webpack-plugin在构建时注入的标签-直接写在模板(public/index.html)中的标签不受影响。

另外，当启用SRI时，preload resource hints会被禁用，因为Chrome的一个bug会导致文件被下载两次

### configureWebpack ###

*  Type: Object | Function

如果这个值是一个对象，则会通过 [ webpack-merge][webpack-merge]合并到最终的配置中。

如果这个值是一个函数，则会接收被解析的配置作为参数。该函数可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。

更多细节可查阅：[配合 webpack > 简单的配置方式][webpack _]

### chainWebpack  ###

*  Type：Function

是一个函数，会接收一个基于 [ webpack-chain][webpack-chain]的ChainAbleConfig实例。允许对内部的webpack配置进行更细粒度的修改。

更多细节看查阅：[配合 webpack > 链式操作][webpack _ 1]

### css.modules  ###

*  Type：boolead
 *  Default：false

默认情况下，只有 \*.module.\[ext\]结尾的文件才会被视作CSS Modules模块。设置为true后你就可以去掉文件名中的 .module 并将所有的 \*.(css|scss|sass|less|styl(us)?)文件视为CSS Modules模块。

更多细节可查阅：[配合 CSS > CSS Modules][CSS _ CSS Modules]

### css.extract ###

*  Type：Boolean | Object
 *  Default：生产环境下是 true，开发环境下是 false

是否将组件中的CSS提取至一个独立的CSS文件中(而不是动态注入到Javascript中的inline代码)。

同样当构建Web Components 组件时它总是被禁用(样式是inline的并注入到shadowRoot中)。

当作为一个库构建时，你可以将其设置为false免得用户自己导入CSS。

提取CSS在开发环境模式下是默认不开启的，因为它和CSS热重载不兼容。然而，你仍然可以将这个值显性地设置为true 在所有情况下都强制提取。

### css.sourceMap ###

*  Type: boolean
 *  Default: false

是否为CSS开启source.map。设置为true之后可能会影响构建的性能。

### css.loaderOptions ###

*  Type: Object
 *  Default: \{\}

向CSS相关的loader传递选项。例如：

module.exports = {
      css: {
        loaderOptions: {
          css: {
            // 这里的选项会传递给 css-loader
          },
          postcss: {
            // 这里的选项会传递给 postcss-loader
          }
        }
      }
    }

支持的loader有：

1.  css-loader
2.  postcss-loader
3.  sass-loader
4.  less-loader
5.  stylus-loader

更多细节可查阅：[向预处理器 Loader 传递选项][Loader]

### devServer ###

*  Type：string | Object

[所有 webpack-dev-server 的选项][webpack-dev-server]都支持。注意：

1. 有些值像host、port和https可能会被命令行参数覆写

2. 有些值想publicPath和historyApiFallback不应该被修改，因为它们需要和开发服务器的publicPath同步以保障正常的工作

### devServer.proxy ###

*  Type： string | Object

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

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

module.exports = {
      devServer: {
        proxy: 'http://localhost:4000'
      }
    }

这会告诉服务器将任何未知请求(没有匹配到静态文件的请求)代理到http://localhost:4000。如果你想要更多的代理控制行为，也可以使用path：options成对的对象。完整的选项可以查阅[http-proxy-middleware][]

module.exports = {
      devServer: {
        proxy: {
          '/api': {
            target: '<url>',
            ws: true,
            changeOrigin: true
          },
          '/foo': {
            target: '<other_url>'
          }
        }
      }
    }

### parallel ###

*  Type：boolean
 *  Default：require('os').cpus().length > 1

是否为Babel或TypeScript使用thread-loader。该选项在系统的CPU有多于一个内核时自动启用，仅作用于生产构建。

### pwa ###

*  Type：Object

向[PWA 插件][PWA]传递选项

### pluginOptions ###

*  Type：Object

这是一个不进行schema验证的对象，因此他可以用来传递任何第三方插件选项。例如：

module.exports = {
      pluginOptions: {
        foo: {
          // 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
        }
      }
    }

## Babel ##

Babel可以通过babel.config.js进行配置。

--------------------

提示：

Vue Cli使用了Babel7中的新配置格式babel.config.js和.babelrc或packahe.json中的babel字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录一下的所有文件，包括node\_modules内部的依赖。这里推荐在Vue Cli项目中始终使用babel.config.js取代其他格式。

--------------------

所有的Vue Cli应用都使用 @vue/babel-preset-app，它包含了 babel-preset-env、JSX支持以及最小化包优化过的配置。通过[它的文档][Link 3]可以查阅到更多的细节和preset选项。

同时查阅指南中的[polyfill][]章节

## ESLint ##

ESLint可以通过.eslintrc或package.json中的 eslintConfig字段来配置

更多细节可查阅：[ @vue/cli-plugin-eslint][_vue_cli-plugin-eslint]

## TypeScript ##

TypeScript可以通过 tsconfig.json来配置。

更多细节可查阅：[@vue/cli-plugin-typescript][vue_cli-plugin-typescript]

## 单元测试 ##

--------------------

### Jest ###

更多细节可查阅[ @vue/cli-plugin-unit-jest][_vue_cli-plugin-unit-jest]

### Mocha(配合 mocha-webpack) ###

更多细节可查阅[ @vue/cli-plugin-unit-mocha][_vue_cli-plugin-unit-mocha]

## E2E测试 ##

--------------------

### Cypress ###

更多细节可查阅[@vue/cli-plugin-e2e-cypress][vue_cli-plugin-e2e-cypress]

### Nightwatch ###

更多细节可查阅[@vue/cli-plugin-e2e-nightwatch][vue_cli-plugin-e2e-nightwatch]

[Vue_vue-cli _map]: https://www.jianshu.com/p/bd202dca29ad
[vue-cil 3.0]: https://juejin.im/post/5d130b9a518825670124a721
[Link 1]: https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist
[Link 2]: https://blog.csdn.net/weixin_33790053/article/details/88028846
[Runtime _ Compiler vs. Runtime only]: https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6
[CORS settings attributes]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes
[webpack-merge]: https://github.com/survivejs/webpack-merge
[webpack _]: https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
[webpack-chain]: https://github.com/neutrinojs/webpack-chain
[webpack _ 1]: https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7
[CSS _ CSS Modules]: https://cli.vuejs.org/zh/guide/css.html#css-modules
[Loader]: https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9
[webpack-dev-server]: https://webpack.js.org/configuration/dev-server/
[http-proxy-middleware]: https://github.com/chimurai/http-proxy-middleware#proxycontext-config
[PWA]: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
[Link 3]: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app
[polyfill]: https://cli.vuejs.org/zh/guide/browser-compatibility.html#polyfill
[_vue_cli-plugin-eslint]: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint
[vue_cli-plugin-typescript]: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript
[_vue_cli-plugin-unit-jest]: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest
[_vue_cli-plugin-unit-mocha]: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha
[vue_cli-plugin-e2e-cypress]: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-cypress
[vue_cli-plugin-e2e-nightwatch]: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-nightwatch