vue如何才能正确打包，文件加载不会出错

水深无声 2022-05-31 06:52 316阅读 0赞

1.修改css文件的加载路径  
修改在项目根目录中的build目录中util.js，你不修改的话打包出来的路径是在static/css下的，举个例子如果你的css文件中在开发环境中引入了一个字体文件，但是打包后他css文件寻找路径是在static/css/你的字体文件，static/css显然不是我们想要的，我们的目录是往上两个层级目录中的。因此要加上注释中的标明的语句

// Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            //加上这一句
            publicPath:'../../',
            fallback: 'vue-style-loader'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }

2.修改打包后加载文件路径  
找到config/index.js，

在那个build的对象中修改assetpulblic的值为./

3.静态资源及动态路径图片的处理  
这是一个大坑，相信很多人在尝试使用动态图片路径的时候发现报错，然后百度发现有人说把静态资源放到时/static目录下，nice，这波，我相信很多人都会这样做，but,打包之后，所有图片资源都会用/static路径进行寻找。除非你的web服务器根目录配置就是dist目录，/static就不会报错，但是如果你的的web服务顺根目录配置不是dist目录，dist目录只是一个子文件夹，那么/static就会不存在。  
而且如果你想要进行webapp的本地打包，把资源都放在本地，打包成webapp的话。你的/static肯定就凉。那么如何才能正确使用图片呢？

4.在vue-cli中正确使用图片  
查看webpack.base.conf，默认有一个@的resolve的目录指向的src，因此所有vue组件中(样式不能，样式只有通过路径不能通过@)请求的静态资源文件 路径，都可以这样**@/路径/文件**,@指向的是src。打包后就可以正确使用了。  
那么还有一个需求，使用动态路径比如果说我在vuex中存一个默认用户头像路径，想用动态的方式。  
经过一波百度，可以这样

userImg:require('@/static/images/default_user.png')//用户头像

还是要给webpack进行解析