Vite Official Documentation: Getting Started | Vite Official Chinese Documentation
npm init vite@latest
或者
yarn create vite
或者
pnpm create vite
port 8080 change 8000
Add --port 8000 to the dev of the scripts in the package.json file. For example:
"scripts": {
"dev": "vite --port 8000",
"build": "vite build",
"preview": "vite preview"
},
vite process is not defined error
You can add 'process.env': {} to define in vite.config.js file. as follows
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
define: {
'process.env': {}
}
})
or
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
define: {
'process.env': process.env
}
})
vue3 dynamic routing parameter passing
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
// 引用的两种方法
import callPage from "../view/callPage.vue"; // 方法一
//路由数组
const routes = [
{
path: "/",
name: "callPage",
component: callPage,
children: []
},
{
path: "/calendarDom/:id",
name: "calendarDom",
component: () => import('../view/calendarDom.vue'), // 方法二
children: []
}
]
//路由对象
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes //上面的路由数组
})
//导出路由对象,在main.js中引用
export default router
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.mount('#app')
// App.vue
<script setup>
</script>
<template>
<router-view></router-view>
</template>
<style scoped>
</style>