vue+vite项目部署到二级路径nginx配置方法

因为域名有限，所以想把vue项目部署在某个域名的二级路径上，例如：https://www.example.com/someapp/下

nginx的配置如下：

location ^~ /someapp/ {
    index index.html;
    alias  /opt/someapp/;
    try_files $uri $uri/ /someapp/index.html;
}

在/opt/下新建someapp目录，里面放的就是vue项目打包后的html文件

修改路由文件：router/index.js，主要是history那边需要修改

import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        redirect: "home",
    },
    {
        path: "/Test",
        name: "Test",
        component: () => import("../views/Test.vue"),
    },
];

const router = createRouter({
    history: createWebHistory('/someapp/'), // 设置为二级路径
    routes,
});

export default router;

vite.config.js 内容如下（主要是base路径下修改）

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    base: '/someapp/', // 设置为二级路径
    plugins: [vue()],
    server: {
        proxy: {
            '/api': {
                target: 'http://1.2.3.4:8080', // 实际请求地址
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, ""),
            },
        },
    },
})

vue脚手架+nginx普通的配置，详见：https://blog.terrynow.com/2022/11/10/vue-build-deploy-to-secondary-path-error-fixed/

vue+vite项目部署到二级路径nginx配置方法

文章评论