適用情況
- 需求是使用 Electron + Vue 搭建一個桌面端程序，要求使用測試驅動開發（TDD）這裏針對這個需求做一個 demo 以熟悉整體流程
- 使用 vue cli3 構建項目完成後，不知道如何配置打包
- 打包配置不正確，導致在瀏覽器測試沒有問題，但是打包（build）後，在 Electron 中打開沒有內容，查看源碼只有提示：We're sorry but tdd-vue doesn't work properly without JavaScript enabled. Please enable it to continue.
- 包的安裝等這裏不做解釋
- 在遇到問題時，沒有能直接解決問題的參考，在此做一下記錄。因爲遇到的問題不可能符合所有情況，僅供參考
項目構建過程（忽略即可）
執行以下命令，初始化 electron-forge 項目
yarn electron-forge init tdd-elec
進入 src 目錄，執行以下命令初始化 vue 項目
vue create tdd-vue
選擇 Manually ，勾選 Babel, Router, Linter, Unit ，測試時使用 Jest 作爲單元測試，完成後進入 vue 工程目錄執行以下命令執行第一次單元測試
yarn run test:unit
打包、解決提到的問題
在以前創建的 Electron + Vue 項目中，Vue 打包後生成的頁面是可以直接在瀏覽器中查看的，說明肯定可以通過調整配置解決這個問題，參考的其他博客說這種情況發佈到服務器上就消失了，但是對 Electron 不適用。在控制檯中看到的問題的確是靜態文件（js、css等）找不到，原因是路徑不對，原因是路徑配置不正確
按照已有的辦法，調整 vue 根目錄下的 config/index.js 即可，但是按照上述的構建過程，並沒有該目錄
在 vue 根目錄下創建 vue.config.js 調整配置（也可配置端口等）配置內容如下
const path = require('path')
module.exports = {
// 生成環境：打包後生成的代碼中，靜態文件的查找路徑，默認爲'/'
publicPath: process.env.NODE_ENV === 'production'
? './static/'
: '/',
// 當運行 build 時靜態文件的存放路徑
outputDir: path.resolve(__dirname, '../static'),
// 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄
assetsDir: './',
// 指定生成的 index.html 的輸出路徑 (相對於 outputDir)
indexPath: path.resolve(__dirname, '../index.html'),
};
通過以上配置可以解決提到的問題，打包後可以直接在瀏覽器打開 build 後生成的 index.html 可以正常獲取到靜態資源，當前項目結構、運行生成的 exe 文件後的截圖如下，至此問題解決
