vue cli3.0 vue.config.js配置

本身常常用的一套vue.config.js配置

/**
* vue.config 配置
* @author maybe
*/
const path = require('path');
const CompressionPlugin = require("compression-webpack-plugin"); // gzip压缩
// const fs = require('fs')
// __dirname 老是指向被执行 js 文件的绝对路径
const resolve = dir => {
 return path.join(__dirname, dir);
};
// 项目部署基础
// const BASE_URL = process.env.NODE_ENV === 'production' ? '/web' : '/';
module.exports = {
 // publicPath: './',
 chainWebpack: config => {
   config.resolve.alias
     .set('@', resolve('src')) // key,value自行定义，好比.set('@@', resolve('src/components'))
     .set('_c', resolve('src/components'))
     .set('_conf', resolve('config'));
   config
     .plugin('html')
     .tap(args => {
       args[0].css = require('./config/cdn').css
       args[0].js = require('./config/cdn').js
       return args
     });
 },
 configureWebpack: config => {
   let configNew = {
     externals: {
       'vue': 'Vue',
       'element-ui': 'ELEMENT',
       'echarts': 'echarts',
       'vue-router': 'VueRouter',
       'vuex': 'Vuex',
       'v-charts': 'VeIndex',
       'axios': 'axios',
       'vue-fullpage.js': 'VueFullpageJs'
     }
   };
   if (process.env.NODE_ENV === 'production') {
     // 为生产环境修改配置...
     console.log('\n---生产环境---\n')
     configNew.plugins = [
       new CompressionPlugin({
         // filename: "[path].gz[query]",
         // algorithm: "gzip",
         test: /\.js$|\.html$|\.css/,
         threshold: 10240,
         minRatio: 0.8,
         deleteOriginalAssets: false
       })
     ]
   }
   return configNew;
 },
 assetsDir: 'assets', //静态资源目录(js,css,img,fonts)这些文件均可以写里面
 // 打包时不生成.map文件
 productionSourceMap: false,
 // 输出文件目录
 outputDir: 'maybe',
 // webpack-dev-server 相关配置
 devServer: {
   // 设置主机地址
   host: '0.0.0.0',
   // 设置默认端口
   port: 56666,
   // 设置代理
   proxy: {
     '/api': {
       // 目标 API 地址
       // 开发环境
       // target: 'http://192.168.4.111:8888',

       // 若是要代理 websockets
       ws: false,
       // 将主机标头的原点更改成目标URL(设置跨域)
       changeOrigin: true,
       pathRewrite: {
         '^/api': ''
       }
     }
   }
 },
 css: {
   loaderOptions: {
     sass: {
       // 配置scss 全局样式文件 支持全局变量
       data: `
         @import "@/assets/css/common.scss";
       `
     }
   }
 }
};
复制代码