Vite官方网站:Vite | 下一代的前端工具链
Vite 并不是基于 Webpack 的,它有自己的开发服务器,利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建,速度也更快。
兼容性注意
Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。
搭建一个 Vite 项目
使用 NPM:
$ npm create vite@latest
使用 Yarn:
$ yarn create vite
使用 PNPM:
$ pnpm create vite
根据提示,填写项目名称和使用的框架
然后进入项目里面,安装依赖项和启动项目,就可以正常打开项目了:
配置环境变量
vite 提供了开发模式和生产模式,这里我们可以建立 4 个.env文件,一个通用配置和三种环境:开发、测试、生产。
env文件中的变量名建议以VITE_APP开头,和vue cli中的VUE_APP相同 ,用法也一致
.env文件 通用配置 用来配置一些公用的,栗子:网页的title VITE_APP_TITLE=hello
.env.dev文件 开发环境配置 以api url为例 VITE_APP_PROXY_URL=/api
.env.test文件 测试环境配置 以api url为例 VITE_APP_PROXY_URL=/api
.env.prod文件 测试环境配置 以api url为例 VITE_APP_PROXY_URL=/apiProd
在写api的时候可以这么使用
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或者__dirname报红,需要安装支持@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/, '')
}
}
}
})
配置了@别名之后去引入文件发现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
然后写个scss文件试试:
效果出来了:
配置Antd组件库
安装组件库,然后导入样式,然后使用
npm install antd --save
或者
yarn add antd
在main.ts中导入样式:
然后在组件中使用: 文章来源:https://www.toymoban.com/news/detail-634513.html
效果展示:文章来源地址https://www.toymoban.com/news/detail-634513.html
到了这里,关于使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!