通常我们写完vue项目后,会执行 npm run serve 对项目进行打包。执行完后,就在项目的目录中生成dist文件夹。一开始,我以为双击dist文件夹里index.html会把打包后的项目运行起来,结果在浏览器看到的页面布局异常以及许多图片没有加载出来,再看下控制台,报了下面的错误:Failed to load resource: net::ERR_FILE_NOT_FOUND
一开始我认为是webpack版本的问题导致项目打包时出现异常,于是就不断地降低版本,结果还是和之前一样。最后,我发现了前面出现的异常的原因是index.html在加载一些js、css、图片的资源时,出现路径不正确的情况。最终,我通过另一种方法(基于node.js的express框架来搭建一个微型服务器)来解决问题。
基于node.js的express框架来搭建一个微型服务器(以vscode为例):
一、我们先将一个文件夹,打开vscode的终端(输入 Ctrl + ` 或是 点击下面的选项)
二、在终端中输入npm init -y后,会在文件夹目录中看到package.json文件,之后再输入 npm i express
如果看到下面标记的地方,说明express插件安装成功
三、把之前打包好的dist文件复制进来,再新建app.js文件,把下面代码复制进去:
let express = require('express');let app = express();app.get('/',function (req,res) {res.send('我是首页');
})app.use(express.static('./dist/'));app.listen(8088,function () {console.log('服务器启动成功: http://localhost:8088');
})
8080是该微型服务器的端口号,如果被占用了请自行更换一个。
四、在终端执行 node app.js 命令,把服务器运行起来,最后在浏览器中输http://localhost:8088/index.html就可以看到成功运行后的项目。