回答問題

DEMO-GIF

1692886788840.gif

程式碼

vue-project.zip

懶人包

1. 初始化專案 記得安裝 vue-router
<https://github.com/vuejs/create-vue>
2. 用相對路徑 圖一
3. 路由改成 # hash模式
4. build dist
5. 使用 chrome 加參數再開啟 --allow-file-access-from-files 圖三

補充:
如果直接點開 dist 可能會遇到 CORS
Access to script at 'file:///C:/xxx/vue-test/vue-project/dist/assets/index-77900606.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
順序:
先找到chrome捷徑(圖三)
C:\\ProgramData\\Microsoft\\Windows\\Start Menu\\Programs
加上參數 `--allow-file-access-from-files` 用捷徑開啟
最後再點 dist裡面的index.html

切記要用參數那個捷徑開 chrome

Untitled

Untitled

Untitled