vue项目前缀nginx部署，解决刷新500 404等问题

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

背藏玫瑰

2784人浏览 · 2023-11-30 15:00:41

背藏玫瑰 · 2023-11-30 15:00:41 发布

vue项目中创建路由设置base路径
vue.confg.js配置publicPath(默认为：‘/’)
nginx配置后重启项目

vue项目中的配置

背景

假如我有个项目，ip访问：http://10.11.12.13:8080/login
域名访问 https://test001.hhhhhh.com/login
加个路径 “h5”
IP访问应该为：http://10.11.12.13:8080/h5/login
域名访问应该为： https://test001.hhhhhh.com/h5/login

在vue中项目怎么配置呢？

项目一：vue2中使用webapck

（1）环境变量配置（.env.test）

VUE_APP_

//指定路径
VUE_APP_SERVE_CATALOGUE = '/h5'

//vue测试代理地址
VUE_APP_BASE_URL = '/h5/api'

VUE_APP_BASE_API = 'http://10.10.10.38:8888/'

（2）路由配置（router/index.js）

const router = new VueRouter({

mode: "history",

base: process.env.VUE_APP_SERVE_CATALOGUE,

routes,

});

（3）接口请求配置（request.js）

const service = axios.create({

baseURL: process.env.VUE_APP_BASE_URL || “/api”,

// withCredentials: true, // send cookies when cross-domain requests

timeout: 12000 // request timeout

})

（4）vue.confg.js 配置

publicPath: process.env.VUE_APP_SERVE_CATALOGUE + "/",

devServer: {

port,

proxy: {

[process.env.VUE_APP_BASE_URL]: {

target: process.env.VUE_APP_BASE_API,

changeOrigin: true,

pathRewrite: {

[process.env.VUE_APP_BASE_URL]: "",

},

},

},

},

（5）webpack.dev.js或webpack.prod.js

output: {

path: resolve('dist'),

filename: 'js/[name].[hash].js',

chunkFilename: 'js/[name].[hash].js',

publicPath: '/h5/',

},

选择使用vue.confg.js 或者webpack看自己的需求和习惯

项目二：vue3中使用vite.config.js

（1）环境变量配置（.env.test）
VITE_APP_

VITE_APP_BASE_API = 'http://10.10.10.10:8888/'
VITE_APP_BASE_PUBLIC = '/docmodel/'
VITE_APP_BASE_URL = '/docmodel/api'

(2)路由配置（router/index.ts）

const router = createRouter({

history: createWebHistory(import.meta.env.VITE_APP_BASE_PUBLIC),

routes,

});

(3）接口请求配置(request.js)

const baseURL = import.meta.env.VITE_APP_BASE_URL || "/api";

(4)vite.config.js

base: VITE_APP_BASE_PUBLIC,

server: {

port: 8080, // 本地服务端口

cors: true,

sourcemap: false, //是否构建source map 文件

// 10月更新

minify: "terser", // 混淆器，terser 构建后文件体积更小，'terser' | 'esbuild'

chunkSizeWarningLimit: 1500, //chunk 大小警告的限制，默认500KB

open: true, //在服务器启动时自动在浏览器中打开应用程序。当此值为字符串时，会被用作 URL 的路径名。

strictPort: true, // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口

proxy: {

// 代理

// 字符串简写写法

// '/foo': 'http://localhost:4567/foo',

// 选项写法

[VITE_APP_BASE_URL]: {

target: VITE_APP_BASE_API,

changeOrigin: true,

// secure: false,

rewrite: (path) => path.replace(VITE_APP_BASE_URL, ""),

},

// 正则表达式写法

// '^/fallback/.*': {

// target: 'http://jsonplaceholder.typicode.com',

// changeOrigin: true,

// rewrite: (path) => path.replace(/^\/fallback/, '')

// }

},

},

nginx.配置

ip 方式一

10.10.10.10:9108/login

//不带路径的

server{
listen 9108;
access_log /opt/nginx/logs/nginx-9108.log;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
root /home/finance/App/test/;
location / {
try_files $uri $uri/ /index.html;
}
location ~.*\.(js|css|jpg|png|jpeg|gif|mp4|svg|woff|ico|tff)$ {
expires 30d;
}

}

带路径10.10.10.10:9108/h5/login

server{
listen 9109;
access_log /opt/nginx/logs/nginx-9109.log;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
# root /home/finance/App/test/;
location /h5/ {

//histry的配置方式
try_files $uri $uri/ /h5/index.html;
alias /home/finance/App/test/;

//hash的配置方式
index index.html index.htm;
proxy_http_version 1.1;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}

// 资源访问
location ^/h5/(.*)\.(js|css|jpg|png|jpeg|svg|woff|ico|tff)$ {
alias /home/finance/App/test/;
expires 30d;
}

location ^~ /h5/api/ {
proxy_pass http://10.10.10.10:8888/;
}

}

IP配置方式2(重点)

server
{
listen 9210;
access_log /opt/nginx/logs/nginx-9210.log;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
location / {
root /home/finance/App/test/;
try_files $uri $uri/ /index.html;
expires 0;
index index.html index.htm;
rewrite ^/h5/(.*) /$1 last;
if ($uri ~ .*\.(ico|css|js|png|jpg|gif|jpeg|webp|ogg|mp3|wav|woff|woff2|ttf|eot|svg|json|zip|txt|docx)$) {
expires 30d;
}
}

#注意这里不是 /h5/api/ 是 /api/
location ^~ /api/ {
proxy_pass http://10.10.10.10:8888/;
}

}

域名方式配置

server {
listen 9000;
charset utf-8;
access_log /opt/nginx/logs/access.log main;
      add_header Access-Control-Allow-Headers *;
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT";
add_header Content-Security-Policy "upgrade-insecure-requests;connect-src *";
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
client_max_body_size 2048m;

location / {
   root /home/;
}

#匹配路径
   location /h5/ {
try_files $uri $uri/ /h5/index.html;
alias /home/finance/App/test/;
index index.html index.htm;
}

#匹配资源

location ^/h5/(.*)\.(js|css|jpg|png|jpeg|svg|woff|ico|tff)$ {
alias /home/finance/App/test/;
expires 30d;
}

#接口代理

    location ^~/h5/api/{
proxy_pass http://10.10.10.10:8888/;
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_http_version 1.1;
# proxy_set_header Upgrade $http_upgrade;
# proxy_set_header Connection $connection_upgrade;
}
//接口代理

location ^~/h5/dom/{
proxy_pass http://xxxx.com.test/;
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_http_version 1.1;
# proxy_set_header Upgrade $http_upgrade;
# proxy_set_header Connection $connection_upgrade;
}

#ws代理
location /asr/ {
proxy_pass http://1010.10.10:8887/;
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_set_header X-Client-IP $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 60;
proxy_read_timeout 600;
}

}

应用之间反向代理

如果为了方便 https://test001.hhhhhh.com/h5/login 方向代理到 http://10.11.12.13:8080/h5/login

怎么配置呢？

location /video/ {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_pass http://test-obs.baidu.com/;
}
location /h5/ {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_pass http://10.11.12.13:8080/h5/;
}

随笔一记，如能解决问题，麻烦点赞下

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 个月前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m