vue 部署默认是部署到根目录，如果说需要部署到 /xxx 这样的二级目录应该如何处理呢？
其实很简单，由于我是使用的 vite + vue3 + typescript,所以我修改的配置文件为 vite.config.ts,其中，base: "web2022", 就是配置二级目录的地方,web2022就是我使用的二级目录，如果没有使用路由，则已经修改完成了，如果使用了路由，请继续往下看。

注意：如果web2022 前后不加斜杠的话会提示 "base" option should start with a slash.和 "base" option should end with a slash.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

export default defineConfig({
  base: "/web2022/",
  build: { outDir: 'dist/web2022' },
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, "./src"),
      },
    ],
    extensions: [".ts", ".js"],
  },
});

使用vue-router后，需要修改路由的配置，关键在于createWebHistory("web2022"),修改完成后编译即可。

const router = createRouter({
  history: createWebHistory("web2022"),
  routes,
});

注意：部署的时候需要部署到名字对应的二级目录才能正常使用。

/网站根目录
    /xxx    这个目录里面才放编译出来的文件

版权属于：virgo's blog（除特别注明外）

本文链接：https://blog.scqloud.cn/archives/43.html

转载时须注明出处及本声明