VUE使用Webpack打包路径问题

2019年9月15日 326次阅读 来源: 李佳臣

使用Webpack进行项目打包，容易出现引用资源路径错误问题。总结一下

一、webpack打包指令

npm run build

二、webpack打包后生成dist文件,将dist文件夹中的文件，放在服务器上

1、如果页面空白，报错资源的引用路径不对

解决：找到 config > index.js

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // assetsPublicPath: '/',
    // 在/前边+  .
    assetsPublicPath: './',
}

2、如果图片不显示

图片路径实例：

《VUE使用Webpack打包路径问题》

在src > assets > img > index.jpg 放置图片
在src > components > home > Home.vue 引用

.home-bg
    background-image: url("../../assets/img/index.jpg")

打包生成文件后，图片加载路径会出问题。

解决：找到 build > utils.js

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
        // 添加publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

三、再次打包

—-end——

PS：引用图片路径很长，可以通过设置引用路径，来简写代码。比如：

background-image: url("~assets/img/index.jpg")

感兴趣可以看我的另一篇文章vue-cli webpack.base.confi.js引用路径的配置

    原文作者：李佳臣
    原文地址: https://segmentfault.com/a/1190000017370740
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞