![](/img/trans.png)
[英]I have an ESlint error in my Vue.js project, why can't I fix it
[英]Why can't I preview Vue project locally?
從 Vue CLI https://cli.vuejs.org/guide/deployment.html中,它指出dist
目錄是由 Z293C9EA246FF9985DC6F62A6507F 服務器提供的。 但是為什么不能從 index.html 預覽呢? 因為我的理解是 Vue 只是一個前端 JavaScript 框架,所以應該可以從任何瀏覽器預覽它。 如果是使用cdn創建一個簡單的vue項目,可以直接在瀏覽器上預覽。 但是通過 CLI 創建的 vue 項目並非如此。 有人可以解釋一下嗎。
查看 Chrome 開發工具。 您將看到一些類似於以下的錯誤:
如您所見,有一堆文件無法導入。 這是因為這些文件不是使用相對文件路徑導入的,而是使用絕對路徑導入的(從根目錄開始,在index.html
中的所有文件中的前置/
可見)。
如果您從dist
目錄運行本地服務器,根目錄將解析到該目錄,從而允許正確導入文件並且您的站點在瀏覽器中可見。
但是,如果您只是在瀏覽器中打開 index.html 文件, /
將解析到您的操作系統的根目錄,其中不包含這些文件。 如果您要將所有這些文件復制到操作系統的根目錄中,以便成功解析路徑,則不需要服務器來查看您的 Vue 應用程序。
CLI 項目的構建考慮了在服務器上的使用。 這個想法是能夠將dist
目錄中的文件部署到服務器並擁有一個工作的 Vue 應用程序。
只是為了添加@aside的一個很好的答案。
您可以使用 Vue CLI 的publicPath配置選項並將其設置為''
或./
- 這應該足以使其在文件系統中工作
該值也可以設置為空字符串 (
''
) 或相對路徑 (./
),以便使用相對路徑鏈接所有資產。 這允許將構建的捆綁包部署在任何公共路徑下,或在基於文件系統的環境中使用,例如 Cordova 混合應用程序。
vue.config.js
module.exports = {
publicPath: ''
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.