vue项目打包的dist文件如何运行

一般在vue项目开发的的过程中，有些人会很疑惑为啥预览打包后的dist文件夹中的  index.html  会报错显，页面显示不出来呢？

本片文章将会介绍两种快速的解决方案 （希望对大家能有所帮助）；

第一种方案：在本地搭建express服务器，在服务器中运行

⑴ 首先可以创建一个文件夹 (例如:打包项目运行文件夹）

⑵ 安装 express 和 express-generator生成器       

npm install express -g

npm install express-generator -g

⑶ 创建一个express项目

express expressDemo （expressDemo是项目名）

注意：可能会出现如图所示的报错

（1）管理员身份打开powerShell ，并切换文件夹

（2）输入set-ExecutionPolicy RemoteSigned 然后输入y或a

⑷ 切换目录到expressDemo，并下载依赖

cd expressDemo

npm install

⑸ 把dist目录下的所有文件复制到express项目的public文件夹下

⑹ 运行expressDemo项目

npm start

⑺ 浏览器中输入，便可以实现预览了

http://localhost:3000/#/

---

第二种方案： （此配置vuecli3.0+, webpack 4+  ） 在vue项目的根目录下建立一个vue.config.js文件，其中进行以下配置，然后npm run build之后， 打开dist文件夹下的index.html即可预览

module.exports = { publicPath:"./"};

此时需要注意一下，router的模式不能是 history 模式

        本文总结，更推荐大家使用第二种方法，更简单省事儿，如果想要了解其原理可以去vuejs官网和webpack官网，还有很多知识等我们去学加油！