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";
       `
     }
   }
 }
};
複製代碼