记录下如何部署vue项目——（三）部署Vue项目_vue部署

1.打包

1.1开发vue项目

在vscode中开发完成的vue项目如下，

1.2.打包项目

在目录下执行CMD命令，打包命令：npm run build 执行打包，构建成功的效果图如下，此时可以在项目目录下找到dist文件夹。

dist下的文件：

2.部署在nginx服务器上

2.1 拷贝dist文件夹

把打包好的dist文件夹拷贝到安装nginx里的html文件夹下

2.2修改nginx.conf配置文件

修改  nginx.conf 配置文件 （1：修改一下端口， 2：修改目录）

2.3.运行nginx服务器

cd 到nginx里的安装目录 ，  输入启动命令：start  nginx.exe  

如果已经运行，可以重新加载：

nginx -s reload //重新加载

3.测试

在浏览器输入localhost:8080/dist/就可以访问web服务了。

总结：分三篇文章来记录下部署过程，

第一篇文章介绍了如何安装node.js，注意如果不用拉取代码在服务器打包的话，也可以不用安装。

记录下如何部署vue项目——（一）安装Node.js和npm-CSDN博客

第二篇文章介绍了如何安装NginxWeb服务器。

 记录下如何部署vue项目——（二）安装Nginx-CSDN博客

本篇文章是最后部署VUE打包项目，好记性不如烂笔头，希望对您有帮助！

补充：

        如果后台服务的地址不在同一个机器，可能产生跨域的问题，可添加如下proxy来解决。

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        location /admin {
            proxy_pass   http://192.168.2.88:8087;
            #proxy_pass   http://192.168.20.199:8087;
        }