美文网首页
vue静态资源打包

vue静态资源打包

作者: 坏丶毛病 | 来源:发表于2020-12-31 10:16 被阅读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标签的方式去引用这个文件

    <script type="text/javascript" src="/config.js"></script>
    

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

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

    打包后在dist文件夹中我们就可以看到这个js文件,它并没有被打包压缩,而是保留了原始文件,我们在不同的环境就可以选择修改这份配置文件,这样就能达到不修改代码重新打包也能达到我们想要的效果了。


    在这里插入图片描述
    在这里插入图片描述

    所以,我们可以根据不同的应用场景,生成不同的配置文件,达到不用二次打包也能对应不同环境的情况了。

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

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

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

    <link rel="icon" href="<%= BASE_URL %>favicon.png" />
    

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

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

    这样就能解决我们logo图片打包后无法被替换或删除的问题。
    官网解释:


    在这里插入图片描述

    期待能够对你有所帮助~~~
    如有问题,请指出,接受批评。

    相关文章

      网友评论

          本文标题:vue静态资源打包

          本文链接:https://www.haomeiwen.com/subject/pyjloktx.html