Linux部署vue项目
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
一、nginx.conf配置文件位置:
/etc/nginx/nginx.conf
二、nginx的常用命令
1、启动 Nginx
start nginx 或 systemctl start nginx
2、关闭 Nginx
nginx -s stop
3、更新 Nginx 配置( nginx.conf )
nginx -s reload
4、重启 Nginx
nginx -s reopen 或 systemctl restart nginx
5、查看 Nginx 状态
systemctl status nginx
三、Vue项目部署后,刷新页面出现404
location / {
root /root/mall_cms; // 项目路径
index index.html; // html文件
try_files $uri $uri/ @router; //
}
//对应上面的@router
location @router {
rewrite ^.*$ /index.html last;
}
在nginx.conf的server 里配置 try_files 与 @router 详细见Vue Router官网 不同的历史模式 | Vue Router
四、部署到服务器 nginx配置
单个项目配置:
location / {
root /root/mall_cms; // 项目路径
index index.html; // html文件
try_files $uri $uri/ @router; //
}
//对应上面的@router
location @router {
rewrite ^.*$ /index.html last;
}
多个项目配置:
一、修改vue.config.js文件里publicPath:
/**
*默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如*果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 *https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。
*/
module.exports = defineConfig({
// production 正式环境,development 开发环境
publicPath: process.env.NODE_ENV === 'production' ? '/tubeLane/' : '/'
})
二、路由中的base参数
let router = new VueRouter({
base: process.env.NODE_ENV === 'production' ? '/tubeLane/' : '/',
mode:"history"
routes
})
三、nginx配置,nginx.conf文件
#配置根路径,html, rewrite:重定向到/piperack
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ index.html;
}
location ^~ /piperack/ {
#下面这一句是重点,意思就是将地址都导向/piperack/index.html
try_files $uri $uri/ /piperack/index.html;
}
location ^~ /tubeLane/ {
#下面这一句是重点,意思就是将地址都导向/tubeLane/index.html
try_files $uri $uri/ /tubeLane/index.html;
}
Nginx服务器目录
完整代码
server {
/* 默认项
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
#root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Method' *;
add_header 'Access-Control-Allow-Headers' *;
*/
/* 修改项
#配置根路径,html, rewrite:重定向到/piperack
location / {
root /usr/share/nginx/html;
#index index.html;
try_files $uri $uri/ index.html;
}
location ^~ /piperack/ {
#下面这一句是重点,意思就是将地址都导向/piperack/index.html
try_files $uri $uri/ /piperack/index.html;
}
location ^~ /tubeLane/ {
#下面这一句是重点,意思就是将地址都导向/tubeLane/index.html
try_files $uri $uri/ /tubeLane/index.html;
}
*/
/* 默认项
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
*/
}
四、反向代理
//前端项目代理配置名 /consumapi
location /consumapi/{
//不知道什么作用当时加上就有用了 不加上就没有用
rewrite ^.+consumapi/?(*)$ /$1 break;
//转到什么地址
proxy_pass 接口地址(http://xxx.xx.xx.xx:xxxx)
}
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)