三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题 |
您所在的位置：网站首页 › 文件打不开显示null › 三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题 |
|
index.html为什么打不开？
Vue打包后生成的dist文件中的index.html，双击在浏览器中打开后发现一片空白，打开控制台有很多报错：“Failed to load resource: net::ERR_FILE_NOT_FOUND”。 这是因为dist文件是需要放在服务器上运行的，资源默认放在根目录下。打开index.html可以发现，css和js文件的引用使用的是绝对路径，例如：，对本地磁盘来说，/指向磁盘根目录，所以找不到引用的文件。 有以下解决方案：1. 使用http-server创建一个服务器来访问资源；2. 将index.html中资源引用的绝对路径改为相对路径；3.还可以手写一个简单的node服务器。 使用http-serverhttp-server是一个基于命令行的http服务器。使用方法很简单： 安装：npm install http-server -g 进入dist文件夹：cd dist 执行命令：http-server大功告成！可以打开浏览器在localhost:8080中查看了。 将绝对路径改为相对路径可以选择手动将index.html中所有引用资源的地方全部改成相对路径，如：或。 当然，更优雅的做法是修改项目的publicPath： // vue.config.js module.exports = { // ... publicPath: './' // ... };此时再运行npm run build打包后，打开dist/index.html发现所有资源的引用形式已经变为相对路径：，此时可以双击index.html在浏览器中正常访问了！ 手写一个简单的node服务器在dist同级目录中新增文件server.js： // 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查看效果。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |