Vue本地執行build之后打開dist目錄下index.html正常訪問

場景

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