打包项目

使用下面命令将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，不然修改的配置是不生效的

1
systemctl restart nginx

PS.

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