打包项目

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