vuecli3.x单页面应用vue.config.js文件基础配置
const goods = require('./data/goods.json'); const path = require('path'); // Gzip压缩 const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 压缩文件后缀 const productionGzipExtensions = ['js', 'css', 'scss']; // 是否为开发环境 const isProduction = process.env.NODE_ENV === 'production'; // 自动删除console,debugger,并且打包去掉map文件 const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { // 自定义修改配置信息 publicPath: isProduction ? "./" : "/", // 根路径 outputDir: 'dist', // 构建输出目录 assetsDir: 'assets', // 静态资源目录(js,css,img,fonts) lintOnSave: false, // 是否开启eslint保存监测，有效值：true || false || 'error' chainWebpack: config => { // api以及静态资源路径配置 /* 请求数增多是因为我们页面预先渲染了其它组件，官方说明是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容 */ // 移除 prefetch 插件 config.plugins.delete('prefetch') // 移除 preload 插件 config.plugins.delete('preload'); // 配置别名 config.resolve.alias .set("@", resolve("src")) .set("img", resolve("src/assets/images")) .set("css", resolve("src/assets/styles/css")) .set('scss', resolve('src/static/scss')) // 限制资源文件大小 // config.module // .rule('images') // .use('url-loader') // .loader('url-loader') // .tap(options => Object.assign(options, { limit: 10240 })) }, // 默认在生成的静态资源文件名中包含hash以控制缓存 filenameHashing: true, css: { // css预编译处理器配置项 loaderOptions: { // 给 sass-loader 传递选项 sass: { // @scss/ 是 src/static/scss 的别名 // data: `@import "@scss/public.scss";` } }, modules: false, sourceMap: isProduction ? false : true, // 是否开启css打包检测 }, configureWebpack: config => { if (isProduction) { config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 10240, minRatio: 0.8 })) /*配置代码压缩 安装 npm install uglifyjs-webpack-plugin 否则无UglifyJsPlugin对象*/ config.plugins.push( //生产环境自动删除console,debugger,并且打包去掉map文件 new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_debugger: true, drop_console: true, }, }, sourceMap: false, parallel: true, }) ) } else { // 开发环境 } }, devServer: { port: 7070, // 端口号 host: 'localhost', // 本机ip地址或者使用localhost代替本地服务 open: false, //配置自动启动浏览器 https: false, // 是否开启https协议 hotOnly: false, // 依赖模块热更新 proxy: { // 配置跨域 '/api': { target: 'http://localhost:5000/api/', //跨域地址 changeOrigin: true, ws: true, // 是否跨域 pathRewrite: { '^/api': '' //^是对跨域地址的封装简写 } } }, before: app => { // 在服务内部中间件之前，执行自定义中间件功能，比如加载json文件 app.get('/api/goods', (req, res) => { // 接收两个参数，文件路径和回调函数 res.json(goods); }) } }, // 第三方插件配置 pluginOptions: { } }