這篇“怎么實現(xiàn)vue本地打開build后生成dist文件夾index.html”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么實現(xiàn)vue本地打開build后生成dist文件夾index.html”文章吧。

創(chuàng)新互聯(lián)主要從事網站建設、成都網站制作、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務秀洲,十多年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575

1.問題描述：

npm run build 在dist 文件生成了 index 和 static 文件夾，為什么本地打開不了，給后端就能打開？

如何才能像訪問 npm run dev 的地址那樣訪問？

2.種簡單方法

2.1 修改配置在本地訪問

更改一些路徑參數(shù)后，然后再次運行npm run build 就可以在本地打開index.html

改哪里？

config/index.js文件

build: {
 assetsPublicPath: '/'
}

改成

build: {
 assetsPublicPath: './'
}

修改后再次運行 npm run build

雙擊 index.html 即可

2.2 通過在dist 目錄中起服務訪問

step1：

在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 running at http://${hostname}:${port}`);
 });

step 2:

在dist 路徑下，npm install express

step 3:

node server

3.其他：

3.1 本地訪問不足

如果ajax請求的數(shù)據(jù)是通過訪問本地文件偽造的，那么會報跨域錯誤

不支持跨域讀取本地data

本地訪問路徑如：

file:///Users/Downloads/vue-travel-master/dist/index.html

3.2 生產環(huán)境不支持proxyTable

config/index.js 中，只有開發(fā)環(huán)境dev中配置了proxyTable，支持訪問代理路徑

但是在 build 中配置無效，不支持代理地址

比如我在開發(fā)環(huán)境中請求數(shù)據(jù)

axios.get('/api/index.json?city=' + this.city)

開發(fā)環(huán)境的proxyTable：

proxyTable: {
 '/api': {
 target: 'http://localhost:8080',
 changeOrigin:true,//允許跨域
 pathRewrite: {
  '^/api': '/static/mock'
 }
 }

訪問路徑會替換成  http://localhost:8080/static/mock/index.json

但是生產環(huán)境不支持這樣，路徑要寫全： 

axios.get('/static/mock/index.json?city=' + this.city)

這樣在dist目錄下 node server 就可以訪問了和 npm run dev 的效果是一模一樣的！

起服務訪問地址：

http://localhost:8080/static/js/app.5115f466b0f6ef56da51.js

3.3 express 配置

var express = require('express'); 
var app = express(); 
const hostname = 'localhost';
const port = 8080;

//Express 提供了內置的中間件 express.static 來設置靜態(tài)文件
app.use(express.static('./'));

app.listen(port, hostname, () => {
 console.log(`Server running at http://${hostname}:${port}`);
});
express.static('./')

express 會在靜態(tài)資源目錄下查找文件，即server.js的上層路徑dist目錄，現(xiàn)在你可以加載dist 目錄下的文件了，如：

http://localhost :8080/static/mock/index.json?city=%E4%B8%8A%E6%B5%B7

訪問路徑為：

——dist 
 ——static 
  ——css
  ——js
  ——mock
   ——a.json
 ——index.html 
 ——server.js

以上就是關于“怎么實現(xiàn)vue本地打開build后生成dist文件夾index.html”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前文章：怎么實現(xiàn)vue本地打開build后生成dist文件夾index.html
本文路徑：http://jinyejixie.com/article40/jpdjeo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、網站維護、網站策劃、網站收錄、企業(yè)建站、外貿建站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)