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    这个目录里面才放编译出来的文件
最后修改:2022 年 03 月 01 日 06 : 35 PM
如果觉得我的文章对你有用,请随意赞赏