webpack打包vue项目之后生成的dist文件本地运行

背景

每次项目修改后想要测试一下线上地址有没有问题都需要重新打包然后部署，使用第三方直接本地启动测试

项目打包

npm run build

命令会默认在vue项目的根目录下生成打包后的dist文件。

我们可以看到在dist目录下有一个index.html文件，我们直接在浏览器中打开是不能正常展示我们的项目效果的，这时候就需要我们安装一个http容器，让他在这个容器中执行。我们采用的是serve

安装serve

npm install serve --save
yarn add serve

项目启动

安装成功后，在终端输入serve dist,看到下图所示表示启动成功