@vue/cli 3配置文件vue.config.js

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

module.exports = { 
    // 基本路径
    publicPath: process.env.NODE_ENV === 'production' ? '/dayang/' : '/',
    // 输出文件目录
    outputDir: "dist/web/",
    pages: {
        index: {
          // page 的入口
          entry: "src/main.js",
          // 模板来源
          template: "public/index.html",
          // 在 dist/index.html 的输出
          filename: "index.html",
          favicon: "public/favicon.ico",
          // 当使用 title 选项时，
          // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
          title: "web0.1",
          // 在这个页面中包含的块，默认情况下会包含
          // 提取出来的通用 chunk 和 vendor chunk。
          chunks: ["chunk-vendors", "chunk-common", "index"]
        },
    },
    // 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
    chainWebpack: () => {},
    // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
    // 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
    configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }),
        ],
        // externals: {    
        //   'element-ui': 'ElementUI',
        //   'axios': 'axios',
        //   'jquery': 'jQuery'
        // },
    },
    /* configureWebpack: config => {
        if (process.env.NODE_ENV !== 'development') {
            // 配置生产环境
            return {
                plugins: [new CompressionWebpackPlugin({
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                    threshold: 10240,
                    minRatio: 0.8
                })]
            }
        }
    }, */
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
    productionSourceMap: false,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
            css: {

            },
            // postcss: {
                /*  ident: 'postcss',
                                plugins: (loader) => [
                                    require('postcss-import')({ root: loader.resourcePath }),
                                    require('postcss-preset-env')(),
                                    require('cssnano')()
                                ] */
            // }
        },
        // 启用 CSS modules for all css / pre-processor files.
        requireModuleExtension: true // 去掉文件名中的 .module
    },
    // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建
    parallel: require("os").cpus().length > 1,
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === "darwin",
        host: "10.10.0.232",
        port: 8068,
        https: false,
        hotOnly: false,
        proxy: {
            "/gateway": {
                // target: "http://10.10.0.60:8010/",
                target: 'http://127.0.0.1:9021/',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                // '^/gateway': '/gateway',
                //   '^/gateway': ''
                }
            },
            // '/api': {
            //     target: '<url>',
            //     ws: true,
            //     changeOrigin: true
            // },
        },
        historyApiFallback: true,
        disableHostCheck: true,
        before: () => {}
    }
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    //   subpage: 'src/subpage/main.js'
}