vue.config配置

项目模板地址 （该项目包含代码校验规则）

git clone https://gitee.com/jiangyalong/vue-template.git

//const StyleLintPlugin = require('stylelint-webpack-plugin');
const path = require('path');
// 将打包后的 JS/CSS/IMG/FONTS 等资源统一放到 static 目录中
const ASSERTS_DIR = 'static';

module.exports = {
	// lint错误是否需要展示 warning 只展示警告 true 错误和警告都展示 false都不展示
	lintOnSave: process.env.NODE_ENV === "development" ? "warning" : false,

	// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
	assetsDir: process.env.NODE_ENV !== "development" ? ASSERTS_DIR : "",

	// 部署的路径 默认是 / 是域名的根路径；如果是某个文件下可以设置 /filename/
	publicPath: "./",

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

	// 这个配置在webpack打包的工程不需要 因为模板和js是分开的 当模板 new Vue({template:'xxx'})
	runtimeCompiler: false,

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

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

	// 用来配置多文件
	// 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'
	// },

	//配置项目启动后的端口和代理
	devServer: {
		port: 8006,
		// 处理跨域可以将前端发送的未知请求可以代理到该链接上 项目接口直接写 url=logout即可
		proxy: "http://localhost:3000",

		//也可以配置多个代理地址
		// 举个例子: 接口地址 http://localhost:3000/logout
		// 如果按照下文配置 ，那么项目url应该 url=logout即可；
		// proxy: {
		// '/': {
		//   target: 'http://localhost:3000',
		//   ws: true,
		//   changeOrigin: true
		// },
		//       '/foo': {
		//         target: 'http://localhost:4000/foo'
		//       }
		//     }
		
		// 数据mock 启用express
		before(app) {
			app.get('/api/list', (req, res) => {
				res.json([1,2,3])
			})
		}
	},

	//webpack配置 需要按照eslint校验的文件
	// configureWebpack: {
	// 	plugins: [
	// 		new StyleLintPlugin({
	// 			files: ['src/**/*.{vue,htm,html,css,sss,less,scss,sass}']
	// 		})
	// 	]
	// },

	chainWebpack: config => {
		const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
		// 项目使用scss
		types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
	},


};

// 自动化导入样式文件 (用于颜色、变量、mixin等)，可以使用 style-resources-loader
// https://cli.vuejs.org/zh/guide/css.html#%E8%87%AA%E5%8A%A8%E5%8C%96%E5%AF%BC%E5%85%A5
function addStyleResource(rule) {
	rule.use('style-resource')
		.loader('style-resources-loader')
		.options({
			patterns: [
				path.resolve(__dirname, './src/styles/imports.scss'),
			],
		})
}