打包项目

使用下面命令将Vue项目打包，会生成一个名为dist的文件夹，然后将它上传到CentOS7系统中，也可以重命名这个文件夹以作区分

1
npm run build

修改Nginx配置

在配置文件中加入下面代码，我的配置文件路径为/etc/nginx/conf.d/default.conf，如果是部署到云服务器需要在安全组或防火墙中开放端口，不然无法访问

1
2
3
4
5
6
7
8
9
server {
   listen       8081; #访问的端口

   location / {
      root /home/project/vue/project-template; #要部署的Vue项目存放的位置
      index  index.html index.htm; #首页文件
      try_files $uri $uri/ /index.html; #防止刷新后自动跳到自带404页面
   }
}

重新加载Nginx配置文件

首先使用下面命令测试 Nginx 配置文件的语法和结构是否正确，而不会加载或应用这些配置，如果配置文件中存在语法错误或其他问题，它会显示相关的错误信息。如果配置文件正确，它会显示类似 "syntax is okay" 和 "test is successful" 的消息

1
nginx -t

如果配置文件正确，在使用下面命令加载Nginx配置文件

1
nginx -s reload

PS.

除了使用Nginx部署Vue项目，还可以使用Tomcat，直接把打包的文件夹丢到webapps目录下然后配置一下访问不用加项目名称就行了，不过还是推荐使用Nginx