如何将Vue项目部署到nginx
条件:系统:Linux操作系统Linux系统中已经安装了nginx。如果未安装配置好,请先安装配置项目是vue1.打包Vue项目在vue项目的目录下,进入cmd,输入npm run build打包完成后会生成一个dist文件夹。2.将dist文件加放到ECS服务器中注意:不要将dist文件放到/root目录里面。如果放到了/root目录下,最终运行的时候会报403的错误。还要将dist的权限设置成
·
条件:
系统:Linux操作系统
Linux系统中已经安装了nginx。如果未安装配置好,请先安装配置
项目是vue
1.打包Vue项目
在vue项目的目录下,进入cmd,输入
npm run build
打包完成后会生成一个dist文件夹。
2.将dist文件加放到ECS服务器中
注意:不要将dist文件放到/root目录里面。如果放到了/root目录下,最终运行的时候会报403的错误。还要将dist的权限设置成755,否则可能会权限不支持导致403
3.配置nginx.conf文件
我的nginx.conf放在的是/user/local/nginx/conf目录下
server {
listen 8081; #端口号
server_name localhost; # 主机号,一般是localhost
location / {
root /app/dist; #前端dist文件夹路径
index index.html index.htm; # dist文件夹里的有的运行主页面文件
try_files $uri $uri/ /index.html last; #防止刷新页面404
}
}
检查nginx.conf是否有语法错误
nginx -t
4.启动nginx服务
systemctl start nginx.service
在浏览器输入xxx.xxx.xxx.xxx:8081就ok了
更多推荐
已为社区贡献1条内容
所有评论(0)