【前端大概一分钟】__webpack_public_path__动态配置路径

最新推荐文章于 2025-02-10 16:25:21 发布

weixin_34004750

最新推荐文章于 2025-02-10 16:25:21 发布

阅读量6.3k

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript 前端 ViewUI

原文链接：https://juejin.im/post/5af11ab4f265da0ba5677ccc

本文介绍了一种在前端项目中解决资源文件路径配置不当导致的404问题的方法。通过使用__webpack_public_path__动态配置资源加载路径，避免了因环境变化而引发的路径错误。

坑 (눈‸눈)

公司项目页面是jsp，前端开发用的是webpack + vue全家桶。项目部署时会动态配置一个相对路径

eg. <script src="<%=request.getContextPath()%>/vue-static/build-dist/manifest.js"></script>

webpack输出配置

output: {
    // 文件输出目录
    path: resolve('./build-dist'),
    // 资源加载路径
    publicPath: '/vue-static/build-dist/',
    ......
    }
复制代码

jsp页面中引入的 js、css、img 都可以通过这种方式引入，但是 publicPath 配置项是写死的，webapck编译后的js，css引入的字体、图片在引入时会缺少相对路径导致404错误。

填坑 \(^o^)/

查看webpack文档，发现一神器__webpack_public_path__。用一句话来解释的话，这货就是output配置中的“publicPath”参数另外一种配置方式。

在jsp页面中新建变量存放相对路径

<script>
    // 全局用到的信息
    var INFO_G = {
        // 上下文路径
        contextPath: '<%=request.getContextPath()%>',
        // 企业id
        entId: '${entId}',
        // 用户id
        userId: '${userId}'
    };
</script>
复制代码

修改webpack输出配置项

output: {
    // 文件输出目录
    path: resolve('./build-dist'),
    // 资源加载路径
    publicPath: '',
    ......
    }
复制代码

新建配置文件config.js，在里面添加__webpack_public_path__配置项内容

__webpack_public_path__ = INFO_G.contextPath + '/vue-static/dist/';
复制代码

在入口文件main.js中引入配置文件（注意：一定要在最上面引入）

import './config'
import Vue from 'vue'
import App from './app.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import router from './router'
import axios from 'axios'
复制代码

参考文档：webpack