配置vue.config.js

配置vue.config.js
1:安装compression-webpack-plugin插件,用于打包的时候开启gzip可以很大程度减少包的大小，非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验。
1.1引入compression-webpack-plugin
const CompressionPlugin = require(“compression-webpack-plugin”)
1.2
//打包压缩
在chainWebpack中
if (process.env.NODE_ENV === ‘production’) {
config.plugin(‘compressionPlugin’).use(new CompressionPlugin({
test: /.(js|css|less)$/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false // 不删除源文件
}))
}

2:

const path = require('path')
const CompressionPlugin = require("compression-webpack-plugin")
function resolve(dir) {
     
  return path.join(__dirname, dir)
}
module.exports = {
     
    // 基本路径
    baseUrl: '/',
    // 输出文件目录
    outputDir: 'dist',
    //生产环境则./  开发环境则 /  
    publicPath:process.env.NODE_ENV === 'production'?'./':'/',
    // 多入口配置
    // pages: {
     
    //   index: {
     
    //     entry: 'src/main.js',
    //     template: 'public/index.html',
    //     filename: 'index.html',
    //   }
    // },
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // use the full build with in-browser compiler?
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    compiler: false,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    //是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
    chainWebpack: (config) => {
     
        //生产环境，开启js\css压缩
        if (process.env.NODE_ENV === 'production') {
     
            config.plugin('compressionPlugin').use(new CompressionPlugin({
     
            test: /\.(js|css|less)$/, // 匹配文件名
            threshold: 10240, // 对超过10k的数据压缩
            deleteOriginalAssets: false // 不删除源文件
            }))
        }
        config.module
            .rule('vxe')
            .test(/\.js$/)
            .include//打包时只包含那些文件
                // .add(resolve('node_modules'))
                .add(resolve('src'))
                .end()
            .use()
            .loader('babel-loader')
            .end()
    },
    configureWebpack: () => {
     
        //生产环境取消 console.log
        if (process.env.NODE_ENV === 'production') {
     
            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
        }
    },
    // vue-loader 配置项
    // https://vue-loader.vuejs.org/en/options.html
    vueLoader: {
     },
    // 生产环境是否生成 sourceMap(源程序映射) 文件,如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    productionSourceMap: false,
    // css相关配置
    css: {
     
     // 是否使用css分离插件 ExtractTextPlugin
     extract: true,
     // 开启 CSS source maps?
     sourceMap: false,
     // css预设器配置项
     loaderOptions: {
     },
     // 启用 CSS modules for all css / pre-processor files.
     modules: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    // 是否启用dll
    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
    dll: false,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {
     },
    // webpack-dev-server 相关配置
    devServer: {
     
     open: process.platform === 'darwin',
     host: '0.0.0.0',
     port: 8080,
     https: false,
     hotOnly: false,
     proxy: {
     //如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
        /*'/api': {
          target: 'https://3de.glaway.com', //mock API接口系统
          ws: false,
          secure:true,
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''   //默认所有请求都加了jeecg-boot前缀，需要去掉
          }
        }*/
    },
     before: app => {
     }
    },
    // 第三方插件配置
    pluginOptions: {
     
     // ...
    }
   }