react.js - 基於create-react-app的打包后文件根路徑修改

 

用create-react-app腳手架搭建的react項目 使用 npm run build 之后生成的打包文件只能在根目錄訪問 這樣放在服務器目錄就訪問不到了

報錯為：

手動更改index.html的路徑之后又報靜態資源引入錯誤

把 

改為

這時候報錯為：

 

 解決方法很簡單：

找到myapp目錄config文件夾下面  paths.js

大約在37行左右  （這是在2017-12-23新建的react項目生產的配置文件）

修改為以下代碼

function getServedPath(appPackageJson) {
　　const publicUrl = getPublicUrl(appPackageJson);
　　const servedUrl =
　　envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
　　return ensureSlash(servedUrl, true);
}

 

函數圈住是修改路徑

 

END

 

 

 

下面介紹修改修改暴露之后的文件解決antd樣式丟失問題：

項目文件/config/webpack.config.dev.js和項目文件/config/webpack.config.prod.js兩個文件對應位置加上

 "plugins": [
                ["import", {"libraryName": "antd-mobile", "style": "css"}],
            ],

 

修改之后是這樣：

          {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              "plugins": [
                ["import", {"libraryName": "antd-mobile", "style": "css"}],
            ],
              compact: true,
            },
          },