深入解析vue中config/index.js

详解vue中config下index.js的每一行默认配置

 

 

//vue cli官方地址: https://cli.vuejs.org/zh/config/

module.exports = {
	//部署应用包时的基本 URL。
	//Type: string,
	//默认: '/'
	publicPath: './',

	//当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
	//Type: string
	//默认: 'dist'。不可修改
	outputDir: 'dist',

	//放置生成的静态资源 (js、css、img、fonts) 的目录。
	//Type: string
	//默认: ''
	assetsDir: 'assets',

	//指定生成的 index.html 的输出路径(相对于 outputDir)。也可以是一个绝对路径。
	//Type: string
	//默认index.html
	indexPath: 'index.html',

	//默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。
	//Type: boolean
	//默认: true
	filenameHashing: 'false',

	//在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，象的 key 是入口的名字，value 是：一个指定了 entry, template, filename, title 和 chunks 的对象 (除了entry 之外都是可选的)；或一个指定其 entry 的字符串。
	//Type: Object
	//默认: undefined
	//pages:undefined,

	//设置为 true 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。
	//Type: boolean | 'error'
	//Default: true
	lintOnSave: true,

	//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了
	//Type: boolean
	//Default: false
	runtimeCompiler: false,

	//默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
	//Type: Array<string | RegExp>
	//Default: []
	//************此处有坑，不要使用，使用后会找不到node_modules中的文件，导致ui框架等引入失败
	//transpileDependencies:[],

	//如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
	//Type: boolean
	//Default: true
	productionSourceMap: true,

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

	//在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。
	//需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
	//另外，当启用 SRI 时，preload resource hints 会被禁用，因为 Chrome 的一个 bug 会导致文件被下载两次
	//Type: boolean
	//Default: false
	integrity: false,

	// cors 相关 https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors
	// corsUseCredentials: false,
	// webpack 配置，键值对象时会合并配置，为方法时会改写配置
	// https://cli.vuejs.org/guide/webpack.html#simple-configuration
	configureWebpack: (config) => {

		if (process.env.NODE_ENV === 'production') {
			// 为生产环境修改配置...
		} else {
			// 为开发环境修改配置...
		}
	},

	// webpack 链接 API，用于生成和修改 webapck 配置
	// https://github.com/mozilla-neutrino/webpack-chain
	chainWebpack: (config) => {
		// 因为是多页面，所以取消 chunks，每个页面只对应一个单独的 JS / CSS
		config.module
			.rule('vue')
			.use('vue-loader')
			.loader('vue-loader')
			.tap(options => {
				// 修改它的选项...
				return options
			})
	},

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

		//Type: boolean | Object
		//Default: 生产环境下是 true，开发环境下是 false
		extract: false,

		//是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
		//Type: boolean
		//Default: false
		sourceMap: false,

		//向 CSS 相关的 loader 传递选项。例如/
		//Type: Object
		//Default: {}
		loaderOptions: {
			css: {
				// options here will be passed to css-loader
			},

			postcss: {
				// options here will be passed to postcss-loader
			}
		},
	},

	devServer: {
		host: "localhost",
		port: 8081, // 端口号
		https: false,
		open: false, //配置自动启动浏览器
		/* proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 */

		//配置多个代理
		proxy: {
			"/ec-pcm": {
				target: "http://test.leatc.cn:3980",
				ws:true,
				changeOrigin: true ,// 如果接口跨域，需要进行这个参数配置
				pathRewrite:{//表示会重写上面的/ec-pcm
					'^/ec-pcm':'/ec-pcm'
				} 
			},
		}
	},
	// 构建时开启多进程处理 babel 编译
	//******* 第三方插件未使用
	//parallel: require('os').cpus().length > 1,

	// https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
	//*******PWA插件未使用
	//pwa: {},

	// 第三方插件配置
	pluginOptions: {}
}