Django + Vue cli 3.0 訪問靜態資源問題

【問題背景】

用Vue clie 3.0的搭建得框架把我坑死了，在打包后，調用不到靜態資源js,css,mp3等

 

【問題原因】

vue cli 3.0打包后，dist目錄下沒有static目錄，而Django那邊的靜態資源配置只認static，其他目錄好像沒用

【解決方法】

現在Django項目setting.py里面檢查靜態文件的配置

 

然后再去前端目錄找到vue cli 3.0的配置文件，這里有個坑就是，vue cli 3.0的已經沒有config目錄，配置文件需要手動添加，如果沒有vue.config.js則要新建一個，更改為

module.exports = {
  // 輸出目錄
  assetsDir: 'static',
  // 基本路徑
  // baseUrl: './',
};

這樣用npm run build打包出來的dist文件里面就有static目錄了

 

最后是文件的調用，目前只能調用static里面的文件，如果有其他資源文件放在public里面的話需要轉移到assets目錄里面，這樣在打包的時候才會被打進static目錄。

（在public里面的資源文件是不會被webpack打包的，而是會被直接復制到dist目錄里面，最后會出現調用不掉靜態資源的問題。所以最好把mp3.png之類的靜態資源放到assets目錄）