Vite安装及使用
发布时间:2022-08-26
浏览量: 12448
文章分类: 前端相关
之前一直是使用webpack
来创建vue
项目,但是在最近看了一些文档发现vite
其实来用于开发好像会更爽。并且在现在的版本中来说,已经是非常的稳定了。并且也有很多公司都已经用于实际生产项目中。
vite
对比webpack
第一个最大的优势就是项目的构建速度“快”,随着项目越来越大,vite
的优势会越来越明显。这种快是在构建模式来上体现出来的,vite
类似于只构建首页来提升了构建速度,而webpack
在构建的时候会构建整个应用
Vite
的安装和使用
npm install -g vite
即可安装最新版本的vite
。
在安装后也可以通过vite -v
来查看安装的版本
vite
需要Node.js
版本>=12.0.0
使用vite
创建项目也是比较简单的,可以直接执行npm init vite
,在输入项目名字。选择vue
即可。
FAQ
Vite
创建好了项目进入后启动报错
这个需要注意看提示,在创建完成后,进入创建的目录,需要优先执行npm install
先安装才可以的。如果你能正常创建项目什么的,通常可能都是没有安装。
Vite
项目只有本地Local
地址,没有Network
地址
打开项目的package.json
文件,找到scripts
下的dev
修改为"vite --host"保存后,重新启动项目即可。
Vite
使用@
软链接不生效问题
Vite
本身并不支持软路由,但是可以通过Vite
提供的resolve.alias
来进行配置。
# vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { join } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
//软链接
resolve: {
alias: {
'@': join(__dirname, '/src')
}
}
})
Vite
解决跨域问题
因为没有了webpack
,所以可以通过使用vite
提供的server.proxy
方法来解决。
// utls.request.js
import axios from 'axios'
const service = axios.create({
baseURL: '/api',
timeout: 5000,
headers: {
.....
}
})
export default service
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
// 代理配置
server: {
proxy: {
// 代理所有 /api 的请求
'/api': {
// 代理请求之后的请求地址
target: 'https://www.wuyabala.com/',
// 跨域
changeOrigin: true
}
}
}
})