front-end/shop/vue.config.js

const path = require('path');

const isProduction = process.env.NODE_ENV === 'production';

const proxyTarget = process.env.NODE_ENV === 'local' ? 'http://api.shop.hhb.com' : 'http://api.shop.huaml.com';

function resolve(dir) {
	return path.join(__dirname, dir);
}

const hostUrl = ``;

const cdn = {
	dev: {
		css: [`https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css`]
	},
	pro: {
		css: [
			`${hostUrl}/cdn/nprogress/0.2.0/nprogress.min.css`,
			`${hostUrl}/cdn/quill/2.0.0-dev.3/quill.core.min.css`,
			`${hostUrl}/cdn/viewerjs/1.3.7/viewer.min.css`,
			`${hostUrl}/cdn/element-ui/2.13.0/theme-chalk/index.css`
		],
		js: [
			`${hostUrl}/cdn/vue/2.6.10/vue.min.js`,
			`${hostUrl}/cdn/vue-router/3.1.3/vue-router.min.js`,
			`${hostUrl}/cdn/vuex/3.1.1/vuex.min.js`,
			`${hostUrl}/cdn/clipboard.js/2.0.4/clipboard.min.js`,
			`${hostUrl}/cdn/axios/0.19.0-beta.1/axios.min.js`,
			`${hostUrl}/cdn/nprogress/0.2.0/nprogress.min.js`,
			`${hostUrl}/cdn/Mock.js/1.0.1-beta3/mock-min.js`,
			`${hostUrl}/cdn/quill/2.0.0-dev.3/quill.min.js`,
			`${hostUrl}/cdn/element-ui/2.13.0/index.js`,
			`${hostUrl}/cdn/viewerjs/1.3.7/viewer.min.js`,
			`${hostUrl}/cdn/echarts/4.4.0-rc.1/echarts.min.js`,
			`${hostUrl}/cdn/npm/vue-echarts@4.0.2.js`
		]
	}
};

module.exports = {
	publicPath: '/',
	lintOnSave: true,
	productionSourceMap: false,
	parallel: require('os').cpus().length > 1,
	// 输出文件目录
	outputDir: 'dist/shop/',

	css: {
		extract: isProduction,
		sourceMap: false,
		loaderOptions: {
			stylus: {
				import: '~@/assets/css/common.styl'
			},
			sass: {
				prependData: `@import "~@/assets/css/base.scss";`
			}
		}
	},

	devServer: {
		host: '127.0.0.1',
		port: 7777,
		open: false,
		compress: false,
		overlay: {
			warnings: false,
			errors: true
		},

		proxy: {
			'/dev': {
				target: proxyTarget,
				changeOrigin: true,
				pathRewrite: { '^/dev': '' }
			},
			'/s-dev': {
				target: proxyTarget,
				changeOrigin: true,
				pathRewrite: { '^/s-dev': '' }
			},
			'/pro': {
				target: proxyTarget,
				changeOrigin: true,
				pathRewrite: { '^/pro': '/api' }
			}
		}
	},

	chainWebpack: config => {
		// 移除 prefetch 插件
		config.plugins.delete('prefetch');
		// 移除 preload 插件
		// config.plugins.delete('preload');
		// svg
		// config.module.rule('svg').uses.clear();

		// config.module
		// 	.rule('svg-sprite-loader')
		// 	.test(/.svg$/)
		// 	.exclude.add(/node_modules/)
		// 	.end()
		// 	.use('svg-sprite-loader')
		// 	.loader('svg-sprite-loader')
		// 	.options({
		// 		symbolId: '[name]'
		// 	});

		// 去掉元素之间空格
		config.module
			.rule('vue')
			.use('vue-loader')
			.loader('vue-loader')
			.tap(options => {
				options.compilerOptions.preserveWhitespace = true;
				return options;
			})
			.end();

		// 引入cdn
		config.plugin('html').tap(args => {
			args[0].cdn = cdn[isProduction ? 'pro' : 'dev'];
			return args;
		});

		if (isProduction) {
			config.performance.set('hints', false);

			config.optimization.splitChunks({
				chunks: 'all',
				cacheGroups: {
					libs: {
						name: 'chunk-libs',
						test: /[\\/]node_modules[\\/]/,
						priority: 10,
						chunks: 'initial'
					},
					commons: {
						name: 'chunk-cool',
						test: resolve('src/cool'),
						minChunks: 3,
						priority: 5,
						reuseExistingChunk: true
					}
				}
			});
		}
	},

	configureWebpack: config => {
		if (isProduction) {
			config.externals = {
				vue: 'Vue',
				'vue-router': 'VueRouter',
				'element-ui': 'ELEMENT',
				vuex: 'Vuex',
				axios: 'axios',
				mockjs: 'Mock',
				nprogress: 'NProgress',
				quill: 'Quill',
				viewer: 'Viewer',
				echarts: 'echarts',
				'vue-echarts': 'VueECharts'
			};
		}
	}
};