【前端大概一分鐘】__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」參數另一種配置方式。

1. 在jsp頁面中新建變量存放相對路徑

<script>
    // 全局用到的信息
    var INFO_G = {
        // 上下文路徑
        contextPath: '<%=request.getContextPath()%>',
        // 企業id
        entId: '${entId}',
        // 用戶id
        userId: '${userId}'
    };
</script>
複製代碼

2. 修改webpack輸出配置項

output: {
    // 文件輸出目錄
    path: resolve('./build-dist'),
    // 資源加載路徑
    publicPath: '',
    ......
    }
複製代碼

3. 新建配置文件config.js，在裏面添加__webpack_public_path__配置項內容

__webpack_public_path__ = INFO_G.contextPath + '/vue-static/dist/';
複製代碼

4. 在入口文件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