vue2 vue.config.js常用配置

const { defineConfig } = require('@vue/cli-service');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const path = require('path')

function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = defineConfig({
productionSourceMap:false, //去除生产环境下的sourceMap(.map)文件
assetsDir:'static',//将资源文件全部归类到static文件夹
transpileDependencies: true,
lintOnSave:false, /关闭语法检查/

configureWebpack: {

plugins: [
  
  new NodePolyfillPlugin(),
  new FileManagerPlugin({//创建压缩包
    events: {
      onEnd: {
        delete: [`./dist/*.zip`],
        archive: [
          {
            source: `./dist`, destination: `./dist/dist.zip`,
          }
        ]
      }
    }
  })
],

},
devServer: {

proxy: {//添加代理
  '/index':{
    target:'http://192.168.10.1:8000',
    changeOrigin:true
}

}
},
chainWebpack:config=>{
// config.module.rule('cssMenage').use()
// 配置svg映射
config.module.rule("svg").exclude.add(resolve("src/icons")).end();

config.module
  .rule("icons")
  .test(/\.svg$/)
  .include.add(resolve("src/icons"))
  .end()
  .use("svg-sprite-loader")
  .loader("svg-sprite-loader")
  .options({
    symbolId: "icon-[name]",
  })
  .end();

  

//发布模式
if(process.env.NODE_ENV === 'production'){

  //配置模板文件
  config.plugin('html').tap(args => {
    args[0].template = 'public/index.prod.html';
    args[0].filename = 'index.html';
    return args;
  });

  // 将库分离，使用外部url引入库,减少服务器的压力
  config.set('externals',{
       'vue': 'Vue',
    'vue-router': 'VueRouter',
    "element-ui": "ELEMENT",
    'Vuex': "Vuex",
  })

}
}
})