vue-cli3項目打包時，靜態資源請求失敗 404

1. 首先放一張項目的目錄：

• public文件夾 存放 index.html以及一些json文件。
• src -> assets 文件夾下存放一些需要的圖片。
• src -> components 文件夾下存放每個模塊的組件。
• src 目錄下是App.vue、main.js、router.js、store.js文件。

2. 在執行 npm run build 後，項目多了一個dist文件夾。

     對比打包前，可以看到文件相應的存放位置。

3.此時打開dist裏的index.html文件，顯示的是空頁面。查看報錯：

• Refused to apply style from 'http://localhost:63342/css/app.c72333b2.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
• Failed to load resource: the server responded with a status of 404 (Not Found)

4. 現在去官網查一下文檔。

Vue CLI 配置參考

解決方法如下：

   4.1 在根目錄下創建一個  vue.config.js 文件，修改配置。

module.exports = {
  // 選項...
}

   4.2 注意：從 Vue CLI 3.3 起已棄用baseURL，請使用publicPath。

   4.3 參考配置：

module.exports = {
    // 基本路徑
    publicPath:"./",  // 可以設置成相對路徑，這樣所有的資源都會被鏈接爲相對路徑，打出來的包可以被部署在任意路徑
    outputDir:"dist",  //打包時生成的生產環境構建文件的目錄
    assetsDir: 'public',  // 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
    /*devServer: {
        proxy: 'http://localhost:8080'
    }*/
}

   4.4 運行 npm run build 後生成的dist文件夾：

  此時 打開 index.html 可以正常顯示。

---

PS：在項目中，一些模塊還用axios請求了本地的json文件。經過上面的配置後，只有json數據無法請求，一直報404。

後來經檢查發現，請求的時候，請求路徑爲相對路徑

axios.get('/newsList.json')

換成絕對路徑後就可以請求成功了。

axios.get('newsList.json')

---

項目地址