打包项目

使用下面命令将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