废话不多说，直接上干货
Vue3 项目 里根据 路由选择 history 或hash 两种 方式 发布到Nginx 配置二级目录发布项目：
Vue3 采用 history 方式发布到Nginx
vue.config.js
const prod = process.env.NODE_ENV === 'production'
const publicPath = prod ? '/touristflow-bi/' : '/'
module.exports = {
lintOnSave: false,
productionSourceMap: false,
publicPath: publicPath,
devServer: {
host: 'localhost',
port: '30080', // 端口号
https: false, // https: {type:Bollean}
open: false,
proxy: {
'/api': {
target: 'http://ip:8088',
changOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
router index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Screen',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Screen.vue')
},
{
path: '/admin',
name: 'Admin',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Admin.vue')
},
{
path: '/test',
name: 'test',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/test.vue')
}
]
const router = createRouter({
history: createWebHistory('/touristflow-bi/'),
routes
})
export default router
nginx.conf 配置
worker_processes 1;
events {
worker_connections 4096;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 800 ;
server_name localhost;
#管理平台
location /touristflow-app {
alias F:\\nginx-1.20.2\\dist;
index index.html index.htm;
try_files $uri $uri/ /dist/index.html;
}
#大屏
location /touristflow-bi {
alias F:\\nginx-1.20.2\\bi;
index index.html index.htm;
try_files $uri $uri/ /bi/index.html;
}
# 后台服务
location /touristflow{
proxy_pass http://localhost:30080/touristflow/;
proxy_set_header Real-URI $request_uri;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
}
}
注意：
（1）vue.config.js 里 publicPath: ‘/trouristflow-bi/‘要跟 router index.js 里的 baseUrl :’/trouristflow-bi/’ 对应。
（2）nginx.conf 里配置二级目录方式
location /touristflow-bi {
alias F:\nginx-1.20.2\bi;
index index.html index.htm;
try_files $uri $uri/ /bi/index.html;
}
alias 跟 root 区别：
1 alias是一个目录别名的定义，root则是最上层目录的定义。使用root时，会到root + location 寻找资源；使用alias时，会到alias后定义的目录中找资源；
2 alias后面必须要用“/”结束，否则会找不到文件的。而root则可有可无;
try_files $uri $uri/ /bi/index.html
try_files -尝试访问对应的资源，在第一个资源访问不到时，访问第二个资源，以次向后
$uri Nginx地址变量，即为访问的地址
若访问url为 http://www.xxx.com/index.html 则 $uri 为 /index.html
$uri/ 表示一个目录，请求访问的目录，Nginx try_files可自行判断访问目的的类型 是为文件还是目录
若访问url为 http://www.xxx.com/user/class/ 则 $uri/ 为 /user/class/
所以以上配置的规则为 当 $uri 和 $uri/ 均不是对应资源时 则返回 /bi/index.html 页面
Vue3 采用 Hash方式发布到Nginx
只需要更改一个地方
const router = createRouter({
history: createWebHashHistory( ),
routes: routes
})
