vuecli3 build之后靜態文件出現404

今天打包vue-cli3時，扔到服務器上面發現所有的資源都請求失敗了，然后去根目錄找配置文件，發現沒有vue.config這個文件，只有一個babel.config.js這個文件，於是自己創建了一個vue.config文件如下：

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

然后再次打包，發現請求靜態資源訪問成功了。

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')