Vite官方中文文档:https://cn.vitejs.dev/guide/
文章目录
- 1 项目创建
- 2 使用scss
- 3 设置路径别名
- 4 配置vue-router
- 5 开发服务器代理
npm create vite@latest
切换至项目目录下,安装初始环境依赖
npm i
npm run dev
直接就能跑了
npm add -D sass
// vite.config.ts
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/assets/style/variables.scss";' //这边用了路径别名
},
},
}
})
vite初始化项选择了ts, 引入"path"模块时便会导致ts类型检查提示错误,找不到模块“path”或其相应的类型声明
解决办法:
npm i @types/node -D
// 安装完毕,tsconfig.node.json会自动添加
"compilerOptions": {
...
"allowSyntheticDefaultImports": true
},
// vite.config.ts
...
import { resolve } from 'path'
export default defineConfig({
...
resolve: {
alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
}
})
//tsconfig.json
"compilerOptions": {
...
"baseUrl": ".", // 用于设置解析非相对模块名称的基本目录,相对模块不会受到baseUrl的影响
"paths": { // 用于设置模块名到基于baseUrl的路径映射
"@/*": ["src/*"]
}
...
vue-router官方中文文档:https://router.vuejs.org/zh/introduction.html
npm install vue-router@4
- src
- - router
- - - index.ts
- - - routes.ts
// index.ts
import {createRouter, createWebHashHistory} from "vue-router"
import {routes} from "./routes"
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
// routes.ts
const routes = [
{
path: "/",
redirect: "/home"
},
{
path: "/home",
name: "home",
component: () => import("@/views/Home.vue")
}
]
export {routes}
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
createApp(App).use(router).mount('#app')
全栈开发的时候,我们通常会在本地开启两个服务,一个跑客户端(如vite),一个跑后台(如express);因为服务端口不同,通常会有跨域问题。借助vite配置文件里的服务器代理,可以变相地转化为服务器之间的互相请求,以解决跨域问题。
(发布之后,本地的请求就不存在了,异地的用nginx代理下就行了)
官方文档:https://cn.vitejs.dev/config/server-options.html#server-proxy
// vite.config.ts
export default defineConfig({
server: {
proxy: {
// 字符串简写写法
'/foo': 'http://localhost:4567',
// 选项写法
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})