場景

Vue的項目執行

npm run build

?后會在本地dist下生成打包后的文件

但是此文件給后端后就能訪問，

如果直接在本地雙擊在瀏覽器中打開就會提示一堆文件路徑找不到。

這是因為直接在本地訪問打開的話，請求資源的url是如上圖file://那種開頭的路徑，需要的是類似于

localhost:8080/這樣的在服務器中的訪問路徑。

經過參考別人的博客，有將vue.config.js中的

publicPath: './',?

改為相對路徑的，但是在我這里不適用。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

可以通過在本地啟用一個服務來訪問。

首先在dist目錄下新建server.js

var express = require('express');var app = express();const hostname = 'localhost';const port = 8080;app.use(express.static('./'));app.listen(port, hostname, () => {console.log(`Server is running `);});

注意上面的hostname指的是訪問的ip,這里是localhost代表本機。

但是使用了localhost后不能使用本機Ip進行訪問。

同理如果想將此項目部署到服務器中，也不能設置為localhost，必須設置為服務器的ip。

然后port是端口號，這里是8080

上面是使用的node的的web應用框架Express來充當本地服務器。

所以需要在本地安裝express。這里使用npm進行安裝。

所以前提是你的電腦需要安裝node

所以在dist目錄下打開命令行

npm install express

安裝成功后啟動express服務

node server

啟動成功后localhost:8080就相當于dist目錄，所以如果想訪問dist下的index.html就需要訪問

http://localhost:8080/index.html

?

?

總結

以上是生活随笔為你收集整理的Vue本地执行build之后打开dist目录下index.html正常访问的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。