Vue 3

[WangShuXian6]

Vue 3

[WangShuXian6]

配置 base + router

vite.config.ts

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default ({ mode }) => {
  const BASE = loadEnv(mode, process.cwd()).VITE_BASE_URL; //'/abc'
  console.log("BASE :", BASE);
  return defineConfig({
    plugins: [vue()],
    // process.env.VITE_BASE_URL import.meta.env.VITE_BASE_URL 在这里不可用
    // process.env.VITE_BASE_URL 依赖 @types/node
    base: BASE,
  });
};

.env

VITE_BASE_URL=/abc

src/router.ts

import HelloWorld from "./components/HelloWorld.vue";
import About from "./components/About.vue";
import News from "./components/News.vue";
import * as VueRouter from "vue-router";

export const routes = [
  {
    path: "/",
    component: HelloWorld,
    redirect:'/home',
    children: [],
  },
  {
    path: "/about",
    component: About,
  },
  {
    path: "/news",
    component: News,
  },
];

console.log('import.meta.env:',import.meta.env)
console.log('import.meta.env.VITE_BASE_URL:',import.meta.env.VITE_BASE_URL)

export const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHistory(import.meta.env.VITE_BASE_URL),
  //history: VueRouter.createWebHistory('/abc'),
  routes, // `routes: routes` 的缩写
});

src/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { router } from "./router";

const app = createApp(App);
app.use(router);

app.mount("#app");

src/env.d.ts

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

interface ImportMetaEnv {
  readonly VITE_BASE_URL:string
  //readonly VITE_APP_TITLE: string
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

src/App.vue

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-link to="/">Go to root</router-link>
  <router-link to="/news">Go to news</router-link>
  <router-link to="/about">Go to About</router-link>

  <router-view></router-view>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/components/About.vue

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  <h1>'about'</h1>

</template>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>

src/components/HelloWorld.vue

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  hello
  <h1>{{ msg }}</h1>

</template>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>

src/components/News.vue

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  <h1>'news'</h1>
</template>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>