vue静态资源打包

系统管理员 2021-09-02 06:06 732阅读 0赞

vue项目打包后，可能大家会注意到，会把一些文件都编译压缩到一起，但是打包后我们通常很难再去修改某些东西。

1.  场景一：单点登录。当我们需要把部署包部署到不同的环境，但是有些环境往往不需要登陆的操作，那常规操作的情况下，我们就需要不开启登录的打包一份，然后开启登录后再打包一份
2.  场景二：logo / 标题。当我们需要把部署包部署到不同的现场，每个地方可能对于的标题不一样，那我们不可能根据每个现场的标题去打包一份部署包。

类似的应用场景还有很多。

所以，vue官网为我们提供了一份应急手段，public文件夹(vue cli2中是static文件夹)，它会保留这个文件夹中的原始文件，而不进行编译打包操作。

来看个例子：  
我有个配置，我在main.js中根据这个配置（布尔值）需要判断是否启用登录，但是我不希望应用不同场景我都得去改代码然后再去重新打包。所以，我们在public文件夹中创建一个js文件（如config.js）

window.singleSignConfig = {
        loginUrl: 'http://1.2.3.4:10010',
        isOpenSingleSign: true,
        permissionValue: '234560200213',
    };

然后在index.html文件中通过script标签的方式去引用这个文件

之后，我们就可以在需要的地方可以通过window去使用这个配置，如我在mian.js中使用：

// 是否开启单点登录
    if (window.singleSignConfig.isOpenSingleSign) {
        singleSignOn.init();
    }

打包后在dist文件夹中我们就可以看到这个js文件，它并没有被打包压缩，而是保留了原始文件，我们在不同的环境就可以选择修改这份配置文件，这样就能达到不修改代码重新打包也能达到我们想要的效果了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 1]  
所以，我们可以根据不同的应用场景，生成不同的配置文件，达到不用二次打包也能对应不同环境的清了。

其实，以上都不是本篇要讲的重点。

针对以上配置，我之前为了项目的logo(一张png图片)，也放置在了public文件夹中，方便打包后进行修改。

但是我发现，图片即使放在public文件夹中，打包后更换图片（名字保持不变）、或者删除图片，但是依然显示的原始的图片，怎样都不会生效。  
但是针对项目的icon文件，更换图片却是生效的。  
对比两种写法不同，我发现了icon文件比较特别的地方，有个前缀BASE\_URL：

所以，只要在img标签中也加入对应前缀，就会生效。看下写法：

<img class="logo" :src="`${publicPath}logo.png`" />
    
    <script>
    export default {
        data() {
            return {
                publicPath: process.env.BASE_URL,
            };
        },
    };
    </script>

这样就能解决我们logo图片打包后无法被替换或删除的问题。  
官网解释：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][20200902173016316.gif_pic_center]  
期待能够对你有所帮助~~~  
如有问题，请指出，接受批评。  
个人微信公众号：  
![在这里插入图片描述][20200902173036772.jpg_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/caf9a63a003c4beaab4ce93da68e6cf8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/cf9fba5af35e46f49bcb2eb041740cbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210813/c7f34cbf0d304c5d813de8f3cb3b15d4.png
[20200902173016316.gif_pic_center]: /images/20210813/134eeb086a674585adc76785a82dff68.png
[20200902173036772.jpg_pic_center]: /images/20210813/698c432bdc3f4462a4e861c0e4cb4062.png