审查项目的 webpack 配置
因为 @vue/cli-service 对 webpack 配置进行了抽象，当你想查看webpack的配置时可以使用 inspect命令：
vue inspect # 在终端打印 webpack配置信息
vue inspect > output.js # 把webpack配置信息生成到output.js文件
注意，output.js 文件不是一个有效的 webpack 配置文件，仅用于审查。
修改webpack配置
以修改路径别名为例：
- 项目根目录创建文件
vue.config.js - 参考如下代码修改路径别名：
// vue.config.js const path = require('path') const resolve = dir => path.resolve(__dirname, dir) module.exports = { chainWebpack: config => { config.resolve.alias .set('styles', resolve('src/assets/styles')) } }
参考
const path = require('path') const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const ProxyAgent = require('proxy-agent') const resolve = dir => path.resolve(__dirname, dir) module.exports = { outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录 runtimeCompiler: true, assetsDir: 'static', productionSourceMap: false, // 生产环境的 source map parallel: require('os').cpus().length > 1, configureWebpack: config => { // 公共配置 // cdn引用时配置externals 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖 config.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'vuex': 'Vuex', 'axios': 'axios' } config.resolve.alias = Object.assign({}, config.resolve.alias, { 'src': resolve('src/common'), 'common': resolve('src/views/common'), 'static': resolve('static') }) if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... config.optimization = { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { compress: { drop_console: true, // console drop_debugger: false, pure_funcs: ['console.log']// 移除console } } }) ] } } else { // 为开发环境修改配置... } }, css: { loaderOptions: { css: { importLoaders: 1 // @import 引入的文件可被一个loader处理 （2 可被两个loader处理） } } }, devServer: { port: 80, disableHostCheck: true, // 可使用本地host配置的域名访问 proxy: { '/api': { agent: new ProxyAgent('http://132.128.11.12'), target: 'http://132.128.11.12', ws: false, changeOrigin: true } } } }
