vue/cli4.x PC端项目打包常见问题

导言：vue/cli4.x 项目打包需在根目录手动创建vue.config.js文件，有相关资料连接！

cli 配置连接，针对vue.config.js参数配置

针对vue打包相关详情，npm run build

问题一：vue.config.js 文件参数配置不生效问题

解： >1,是否是项目根目录创建vue.config.js, 与package.json同级

        >2,修改vue.config.js文件后是否有重启项目，npm run serve, 没有重启则不会生效

问题二：vue.config.js 参数配置推荐

解1：我自己使用的简版

// 打包去掉console
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    // 查阅 https://github.com/vuejs/vue-cli/tree/dev/docs/zh/config
    // 项目部署的基础路径,我们默认假设你的应用将会部署在域名的根部，比如 https://www.my-app.com/
    publicPath: './',
    // 输出文件目录
    outputDir: 'dist', //Default: 'dist'
    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: './assets', //Default: ''
    // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
    indexPath: 'index.html', //Default: 'index.html'
    // 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
    filenameHashing: true, //Default: true
    // 是否在保存的时候使用 `eslint-loader` 进行检查。
    // 有效的值：`true` | `false` | `"error"`设置为 `"error"` 时，检查出的错误会触发编译失败。
    lintOnSave: false, //Default: true
    // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右
    runtimeCompiler: false, //Default: false
    // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
    // 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。Type: Object | Function
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            return {
                // 打包去掉console 必须引入TerserPlugin
                optimization: {
                    minimizer: [new TerserPlugin({
                        terserOptions: {
                            compress: {
                                drop_console: true
                            }
                        }
                    })]
                },
                // 关闭 webpack 的性能提示
                performance: {
                    hints: false
                }
            }
        } else {
            // 为开发环境修改配置...
            return;
        }
    },
    // 配置 webpack-dev-server。
    devServer: {
        open: true,
        host: '0.0.0.0',
        port: 8088,
        https: false,
        hotOnly: false,
        proxy: null, // 设置代理 string | Object
    }
}

解2： 详版

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin') // compression-webpack-plugin插件需要npm安装

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    lintOnSave: 'error', // 设置eslint报错时停止代码编译
    productionSourceMap: false, // 不需要生产环境的 source map（减小dist文件大小，加速构建）
    devServer: {
        open: true, // npm run serve后自动打开页面
        host: '0.0.0.0', // 匹配本机IP地址(默认是0.0.0.0)
        port: 8989, // 开发服务器运行端口号
        proxy: {
            '/api': {
                target: 'http://www.exaple.com', // 代理接口地址
                secure: false, // 如果是https接口，需要配置这个参数
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    '^/api': '' //需要rewrite的, 这里理解成以'/api'开头的接口地址，把/api代替target中的地址
                }
            }
        }
    },
    chainWebpack: (config) => {
        // 移除 prefetch 插件(针对生产环境首屏请求数进行优化)
        config.plugins.delete('prefetch')
        // 移除 preload 插件(针对生产环境首屏请求数进行优化)   preload 插件的用途：https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
        config.plugins.delete('preload')
        // 第1个参数：别名，第2个参数：路径  （设置路径别名）
        config.resolve.alias
            .set('@pages', resolve('./src/page'))
            .set('@router', resolve('./src/router'))
            .set('@store', resolve('./src/store'))
            .set('@utils', resolve('./src/utils'))
    },
    // 配置打包 js、css文件为.gz格式，优化加载速度  （参考：https://blog.csdn.net/qq_31677507/article/details/102742196）
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.css/, // 匹配文件
                    threshold: 10240, // 超过10kB的数据进行压缩
                    deleteOriginalAssets: false // 是否删除原文件 （原文件也建议发布到服务器以支持不兼容gzip的浏览器）
                })],
                performance: { // 生产环境构建代码文件超出以下配置大小会在命令行中显示警告
                    hints: 'warning',
                    // 入口起点的最大体积 整数类型（以字节为单位,默认值是：250000 (bytes)）
                    maxEntrypointSize: 5000000,
                    // 生成文件的最大体积 整数类型（以字节为单位,默认值是：250000 (bytes)）
                    maxAssetSize: 3000000
                    // // 只给出 js 文件的性能提示
                    // assetFilter: function (assetFilename) {
                    //   return assetFilename.endsWith('.js')
                    // }
                }
            }
        }
    }
}

标签：cli4,常见问题,false,true,配置,js,PC,vue,config
来源： https://www.cnblogs.com/herotxl/p/15108577.html