vue修改打包后靜態資源路徑的修改，vue 打開html流_三種方案解決Vue項目打包后dist中的index.html用瀏覽器無法直接打開的問題...

index.html為什么打不開？

Vue打包后生成的dist文件中的index.html，雙擊在瀏覽器中打開后發現一片空白，打開控制臺有很多報錯：“Failed to load resource: net::ERR_FILE_NOT_FOUND”。

這是因為dist文件是需要放在服務器上運行的，資源默認放在根目錄下。打開index.html可以發現，css和js文件的引用使用的是絕對路徑，例如：，對本地磁盤來說，/指向磁盤根目錄，所以找不到引用的文件。

vue修改打包后靜態資源路徑的修改？有以下解決方案：1. 使用http-server創建一個服務器來訪問資源；2. 將index.html中資源引用的絕對路徑改為相對路徑；3.還可以手寫一個簡單的node服務器。

使用http-server

http-server是一個基于命令行的http服務器。使用方法很簡單：

安裝：npm install http-server -g

vue直接引入js文件沒有用，進入dist文件夾：cd dist

執行命令：http-server

大功告成！可以打開瀏覽器在localhost:8080中查看了。

將絕對路徑改為相對路徑

vue打包上線跨域解決方案？可以選擇手動將index.html中所有引用資源的地方全部改成相對路徑，如：或。

當然，更優雅的做法是修改項目的publicPath：

// vue.config.js

module.exports = {

vue前端代碼怎么編譯打包。// ...

publicPath: './'

// ...

};

vue打包部署后無法跨域，復制代碼

此時再運行npm run build打包后，打開dist/index.html發現所有資源的引用形式已經變為相對路徑：，此時可以雙擊index.html在瀏覽器中正常訪問了！

手寫一個簡單的node服務器

在dist同級目錄中新增文件server.js：

vue報錯cannot read property。// server.js

// 1. 引入接下來要用到的node內置模塊

const http = require('http');

const url = require('url');

const path = require('path');

const fs = require('fs');

// 2. 利用path解析當前目錄，然后拼接dist目錄，使得服務器當前的根目錄變為dist

const root = path.join(path.resolve(process.argv[2] || '.'), 'dist');

// 3. 創建http服務器

const server = http.createServer((request, response) => {

// 4. 解析請求url獲取文件路徑

const pathname = url.parse(request.url).pathname;

const filepath = path.join(root, pathname);

// 5. 使用fs文件系統模塊讀取index.html文件并返回給前端

fs.stat(filepath, (err, stats) => {

if (!err && stats.isFile()) {

// 響應頭設為200

response.writeHead(200);

// 創建一個讀寫流管道，將index.html文件內容寫入response并返回

fs.createReadStream(filepath).pipe(response);

} else {

// 請求路徑不對時返回404

response.writeHead(404);

response.end('404 Not Found');

}

});

});

// 6. 服務器監聽8080端口

server.listen(8080);

復制代碼

命令行定位到server.js同級目錄中執行node server.js，此時在瀏覽器中可以訪問http://localhost:8080/index.html查看效果。