vue-cli3的配置参考

目录目标浏览器vue.config.jspublicPathoutputDirassetsDirindexPathfilenameHashingpageslineOnSaveruntimeCompilertranspileDependenciesproductionSourceMapcrossoriginintegrityconfi...

任性的我

8717人浏览 · 2019-07-03 15:22:15

任性的我 · 2019-07-03 15:22:15 发布

transpileDependencies

Mocha(配合 mocha-webpack)

E2E测试

Cypress

Nightwatch

文档参考：

目标浏览器

请查阅指南中的浏览器兼容性章节

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

Nightwatch

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

任性的我

@wo_921110

已为社区贡献6条内容