當我們在使用 Vue 打包應用程序時，你可能會遇到一個令人困惑的問題：打包完成后在瀏覽器中運行應用程序時，發現應用程序中的按鈕、鏈接或其他交互元素都無法點擊。
這種情況是由于 Vue 打包應用程序時所生成的文件中包含了一些配置信息，這些信息可能會干擾我們程序中的交互元素。
new Vue({
el: '#app',
router,
components: { App },
template: '以上是一個 Vue 實例的代碼，我們可以看到 'el: #app' 是 Vue 實例的掛載點，意思是告訴 Vue 在哪里渲染應用程序的內容。
在實際開發中，我們通常會在 index.html 文件中定義這個掛載點：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue App</title> </head> <body> <div id="app"></div> <script src="./js/vue.js"></script> <script src="./js/app.js"></script> </body> </html>
請注意，我們需要將 Vue 實例掛載在一個帶有 id 屬性的 div 元素上，這個 div 元素的 id 必須與 Vue 實例的 el 屬性一樣。
如果你使用了 Vue Cli 來創建項目，則你不需要手動添加上述代碼，因為 Vue Cli 會自動生成一個 index.html 文件，其中已包含了一個與Vue 實例對應的掛載點。
但是，當我們將應用程序打包后，在瀏覽器中運行就會發現交互元素無法點擊，這是因為我們忘記了某些重要的配置。
build: {
// 配置生成環境的靜態資源路徑
assetsPublicPath: './',
...
}我們需要在我們的config/index.js或是vue.config.js文件中進行配置，來告訴應用程序在哪里可以訪問打包后的靜態資源。
這里我們給出一份簡單的配置示例：
module.exports = {
publicPath: './'
};在編寫完上述代碼后，我們就可以順利運行我們的 Vue 應用程序了。
上一篇html貓咪代碼