通常我们写完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就可以看到成功运行后的项目。