基於vue-cli腳手架創建的項目打包部署到服務器上發布

正常情況下用vue-cli創建的vue項目，直接執行npm run build命令后，確實能夠得出一個dist文件夾，但打開其中的index.html后，顯示一片空白，控制台報出的警告表示無法加載指定路徑的腳本資源。

為了解決這個問題，需要在打包前先對輸出路徑進行一些聲明處理，比如，在src的同級目錄下創建一個vue.config.js文件（已有的話則修改相應內容），向其中寫入配置信息並保存：

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static'
}

在router的index.js的const router = new VueRouter({...})代碼塊中，如果存在mode: 'history'的模式設定，則需要將此設定注釋掉（或刪掉）。

做完上述步驟后，再執行npm run build命令，得到的資源文件夾即可正常在瀏覽器中顯示其內容。

 

更多關於基於vue-element-admin-master模板構建的項目，以及基於移動端Vue項目打包成apk可安裝文件的相關內容，可參考以下篇章：

https://blog.csdn.net/weixin_43476931/article/details/102843793