目录
文档参考：
目标浏览器
请查阅指南中的浏览器兼容性章节
vue.config.js
vue.config.js基础模板(参考文档)：
/**
* *@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:
- 当使用基于HTML5 history.pushState的路由时；
- 当使用 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是：
- 一个指定了entry，template，filename，title和chunks的对象（除了 entry之外都是可选的);
- 或一个指定其 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
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
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 > 简单的配置方式
chainWebpack
- Type：Function
是一个函数，会接收一个基于 webpack-chain的ChainAbleConfig实例。允许对内部的webpack配置进行更细粒度的修改。
更多细节看查阅：配合 webpack > 链式操作
css.modules
- Type：boolead
- Default：false
默认情况下，只有 *.module.[ext]结尾的文件才会被视作CSS Modules模块。设置为true后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?)文件视为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有：
- css-loader
- postcss-loader
- sass-loader
- less-loader
- stylus-loader
更多细节可查阅：向预处理器 Loader 传递选项
devServer
- Type：string | Object
所有 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 插件传递选项
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支持以及最小化包优化过的配置。通过它的文档可以查阅到更多的细节和preset选项。
同时查阅指南中的polyfill章节
ESLint
ESLint可以通过.eslintrc或package.json中的 eslintConfig字段来配置
更多细节可查阅： @vue/cli-plugin-eslint
TypeScript
TypeScript可以通过 tsconfig.json来配置。
更多细节可查阅：@vue/cli-plugin-typescript
单元测试
Jest
更多细节可查阅 @vue/cli-plugin-unit-jest
Mocha(配合 mocha-webpack)
更多细节可查阅 @vue/cli-plugin-unit-mocha
E2E测试
Cypress
更多细节可查阅@vue/cli-plugin-e2e-cypress
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
