vue 项目打包后dist目录下，css中引用图片、文件路径错乱问题

最新推荐文章于 2024-08-10 22:18:52 发布

原创最新推荐文章于 2024-08-10 22:18:52 发布 · 882 阅读

0 ·

CC 4.0 BY-SA版权

环境搭建同时被 2 个专栏收录

9 篇文章

订阅专栏

7 篇文章

订阅专栏

本文介绍如何在Webpack配置文件中正确设置资源的公共路径，确保静态资源能够被正确引用。通过修改config/index.js中的assetsPublicPath为'./'，并调整utils.js中的ExtractTextPlugin插件配置，添加publicPath为'../../'，实现对CSS文件路径的正确处理。

config/index.js '/'改为'./'



build: {
    assetsPublicPath: './'
}

build/utils.js ExtractTextPlugin.extract 添加 publicPath: '../../'

if (options.extract) {
        return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        //设置css中的路径
        publicPath: '../../'
      })
} else {
      return ['vue-style-loader'].concat(loaders)
}