Vite官方網(wǎng)站：Vite | 下一代的前端工具鏈?
Vite 并不是基于 Webpack 的，它有自己的開發(fā)服務(wù)器，利用瀏覽器中的原生 ES 模塊。這種架構(gòu)使得 Vite 比 Webpack 的開發(fā)服務(wù)器快了好幾個(gè)數(shù)量級。Vite 采用 Rollup 進(jìn)行構(gòu)建，速度也更快。?
兼容性注意
Vite 需要?Node.js?版本 14.18+，16+。然而，有些模板需要依賴更高的 Node 版本才能正常運(yùn)行，當(dāng)你的包管理器發(fā)出警告時(shí)，請注意升級你的 Node 版本。
搭建一個(gè) Vite 項(xiàng)目
使用 NPM:
$ npm create vite@latest
使用 Yarn:
$ yarn create vite
使用 PNPM:
$ pnpm create vite根據(jù)提示，填寫項(xiàng)目名稱和使用的框架
然后進(jìn)入項(xiàng)目里面，安裝依賴項(xiàng)和啟動(dòng)項(xiàng)目，就可以正常打開項(xiàng)目了：?
配置環(huán)境變量
vite 提供了開發(fā)模式和生產(chǎn)模式，這里我們可以建立 4 個(gè).env文件，一個(gè)通用配置和三種環(huán)境：開發(fā)、測試、生產(chǎn)。
env文件中的變量名建議以VITE_APP開頭，和vue cli中的VUE_APP相同 ，用法也一致
.env文件 通用配置 用來配置一些公用的，栗子：網(wǎng)頁的title VITE_APP_TITLE=hello
.env.dev文件 開發(fā)環(huán)境配置 以api url為例 VITE_APP_PROXY_URL=/api
.env.test文件 測試環(huán)境配置 以api url為例 VITE_APP_PROXY_URL=/api
.env.prod文件 測試環(huán)境配置 以api url為例 VITE_APP_PROXY_URL=/apiProd
在寫api的時(shí)候可以這么使用
const baseUrl = import.meta.env.VITE_APP_PROXY_URL
export const getTabList = (params) => {
return axios({
method: 'post',
url: baseUrl + 'QueryTabReq',
data: params
})
}配置proxy代理
vite.config.js中配置server
proxy: {
'/api': {
target: 'http://10.0.40.200:8979',
ws: false,
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
配置@別名使用
如果path或者_(dá)_dirname報(bào)紅，需要安裝支持@types/node到本地 npm i @types/node -D
在vite.config.ts中配置
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias:{
"@": path.resolve(__dirname, "src")
}
},
server: {
host: "",
proxy: {
"api/": {
target: "",
ws:false,
changeOrigin: true,
rewrite: path=> path.replace(/^\/api/, '')
}
}
}
})配置了@別名之后去引入文件發(fā)現(xiàn)vcode沒有智能提示，需要配置tsconfig.json：
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": "./",
"paths": {
"@": ["src"],
"@/*": ["src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
配置sass使用?
直接安裝sass即可：
yarn add -D sass然后寫個(gè)scss文件試試：
效果出來了：
配置Antd組件庫
安裝組件庫，然后導(dǎo)入樣式，然后使用
npm install antd --save?或者
yarn add antd在main.ts中導(dǎo)入樣式：
然后在組件中使用：
?文章來源：http://www.zghlxwxcb.cn/news/detail-634513.html
效果展示：
文章來源地址http://www.zghlxwxcb.cn/news/detail-634513.html
到了這里，關(guān)于使用vite創(chuàng)建Vue/React前端項(xiàng)目，配置@別名和Sass樣式，又快又方便的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
