vue项目如何调试打包后的项目

采用vue-cli 3.10.0创建完项目后，就可以进行开发，这里拿demo做一个打包部署的教程。还没有创建的，可以参考我之前的文章进行创建项目：vue-cli 3.0 创建项目

打包命令：

npm run build 或者： yarn build

打包完成后，在目录里会出现dist文件夹：

将这个文件夹根据实际情况，放到指定位置。我这里是window环境，放到了D:\vue-demo.

之后，编辑Nginx(这里不介绍如何安装nginx啦，假设您已经安装好了)的配置文件nginx.conf：

在server{...}的上一行加入：

include vhost/*.conf;

表示在nginx.conf同级别下引入文件夹vhost，以及里面任何以.conf为格式的文件。

打开vhost文件夹，新建文本文件vue.txt。更改文件格式为vue.conf。用记事本编辑它：

server { listen 8084; access_log log; error_log log; location / { root D:/vue-demo; index index.html index.htm; try_files $uri ; } error_page 500 502 503 504 ; location = { root D:/vue-demo; } location ~ /\.ht { deny all; } }

此处是完整的配置，里面监听的端口是8084，路径是上面设定的。这些可以根据实际情况变更。

之后，启动nginx：

start nginx

如果之前已经启动了，则重启即可：

nginx -s reload

然后输入网址：http://localhost:8084即可看到项目：