Vue のパッケージ化と圧縮

導入

view.config.js

module.exports = {
    
    
    // baseUrl:'./',  在vue-cli.3.3版本后 baseUrl被废除了，因此这边要写成 publicPath。
    publicPath: process.env.NODE_ENV === 'production'  ? '../': '/',
    //项目部署的基础路径
    outputDir: 'zhao',//将构建好的文件输出到哪里(文件夹名)
    assetsDir: './static' //放置静态资源(js,css,img,fonts)
}

npm run buildを実行する

パッケージ化後のパスは次のようになります。

<script src="../static/js/app.bf004ea7.js">

パッケージの説明

publicPath はさまざまなパスのパフォーマンスを設定します

複数のページをパックする

Vue パッケージ化されたマルチページ アプリケーション ソリューション

圧縮

プラグインをダウンロード

compression-webpack-plugin

"compression-webpack-plugin": "^5.0.1"

view.config.js

'use strict'//声明为严格模式，不能使用未声明的变量
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const isProdOrTest = process.env.NODE_ENV !== 'development'
module.exports = {
    
    
    publicPath: './',//部署应用包时的基本 URL
    productionSourceMap: false, // 设为false，既可以减少包大小，也可以加密源码
    transpileDependencies: ['element-ui'], //指定某个库在打包的时候需要编译
    chainWebpack(config) {
    
    
        config.plugins.delete('prefetch'); //默认开启prefetch(预先加载模块)，提前获取用户未来可能会访问的内容 在首屏会把这十几个路由文件，都一口气下载了 所以我们要关闭这个功能模块
        if (isProdOrTest) {
    
    
            // 对超过10kb的文件gzip压缩
            config.plugin('compressionPlugin').use(
                new CompressionWebpackPlugin({
    
    
                    test: /\.(js|css|html)$/, // 匹配文件名
                    threshold: 10240,
                    deleteOriginalAssets: false //是否删除原文件
                })
            );
        }
    }
};