vue-cli3 vue.config.js常用的配置

基础：

module.exports = {
  // 选项...
}

使用publicPath找到服务端的路径 ( 后端api和项目在同一目录下 )

module.exports = {
  publicPath: './'
}

构建项目时打包的位置

module.exports = {
 outputDir: 'dist',
}

eslint代码检测

lintOnSave : ture | false | 'error'

devserve相关配置

devServer: {
  open: true,//设置自动打开
  port: 8000,//设置端口
  proxy: {
    //设置代理
    '/axios': {
      target: 'http://101.15.22.98',
      changeOrigin: true,
      secure: false, //如果是http接口，需要配置该参数
      pathRewrite: {
        '^/axios': ''
      }
    }
  }
}

对内部 webpack 配置 ( 链式操作 )

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir)
}

chainWebpack: () =>{
    config.resolve.alias
          .set('@', resolve('src'))
          .set('views', resolve('src/views'))
          .set('assets', resolve('src/assets'))
    // ......
}

vue.config.js

//打包压缩 取出console.log
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];

// const env = process.env.NODE_ENV;

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: './',//打包后设置静态资源路径
  lintOnSave: false,

  chainWebpack: (config) => {

    config.resolve.alias
        .set('@', resolve('src'))
        .set('assets', resolve('src/assets'))
        .set('components', resolve('src/components'))
        .set('views', resolve('src/views'))
        .set('static', resolve('src/static'))
  },

  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "development") {
      config.devtool = 'source-map'
    } else {

      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp(`\.(${productionGzipExtensions.join('|')})$`),
        threshold: 10240,
        minRatio: 0.8,
      }));

      // config.plugins.push(
      //     new UglifyJsPlugin({
      //       uglifyOptions: {
      //         compress: {
      //           drop_debugger: true, // console
      //           drop_console: true,
      //         },
      //       },
      //       sourceMap: false,
      //       parallel: true,
      //     }),
      // )
    }
  },

  devServer: {
    open: true,//设置自动打开
    port: 8000,//设置端口
    /*proxy: {
      //设置代理
      '/axios': {
        target: 'http://101.15.22.98',
        changeOrigin: true,
        secure: false, //如果是http接口，需要配置该参数
        pathRewrite: {
          '^/axios': ''
        }
      }
    }*/
  }

};