Vue3+Vite+history模式+Nginx 部署二级路径

最新推荐文章于 2025-08-09 00:20:03 发布

原创最新推荐文章于 2025-08-09 00:20:03 发布 · 4.7k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#nginx #前端 #javascript

收录于

vue3+vite 专栏收录该内容

17 篇文章

订阅专栏

背景需求：项目打包及部署到服务器二级路由
例如：我希望将打包的项目部署到 https://xxx.com/web/ 上

1、配置环境变量
.env.production文件

##生产环境
NODE_ENV='production'
VITE_BASE_PATH=/web/

.env.development文件

##开发环境
NODE_ENV='development'
VITE_BASE_PATH='/'

配置路由文件router/index.js

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_PATH),
  routes
})

配置vite.config.js

import { defineConfig, loadEnv } from 'vite';
export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd(), '');
    return {
        base: env.VITE_BASE_PATH,
    }
});

nginx配置文件

server {
  location /web {
    #二级路由时需要使用别名alias，不用root
    alias html/dist/;
    index  index.html;
    #若不配置try_files，刷新会404
    try_files $uri $uri/ /web/index.html;
  }