1 如何创建vite项目?
step 1 :
npm init vite@latest
yarn create vite
step2 :
npm init vite@latest my-vue-app --template vue
npm 7+, 需要额外的双横线:
npm init vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
2 如何让vite项目启动时自动打开浏览器?
注:vite针对开发环境,打包环境和预览环境分别定义了三个选项: server、build、preview。 开发环境server类似于webpack中的devServer。
export default ({mode})=>{
return defineConfig({
server:{
open:true, //vite项目启动时自动打开浏览器
},
}
}
3vite启动默认端口为3000?如何更改默认端口?
export default ({mode})=>{
return defineConfig({
server:{
port:8080, //vite项目启动时自定义端口
},
}
}
4 vite如何设置热更新?
vite默认开发环境关闭了热更新。代码更改需要手动更新,设置更改代码自动刷新页面需要设置hmr:true
export default ({mode})=>{
return defineConfig({
server:{
hmr:true, //开启热更新
},
}
}
5vite中如何配置别名路径?
设置resolver选项
import { resolve } from 'path';
export default ({mode})=>{
return defineConfig({
resolve:{
alias:{
"@":resolve(__dirname,"src"),
"@c":resolve(__dirname,"src/components"),
}
},
}
}
6 vite中如何设置便捷图片路径引用?
比如图片资源都在src/assets/image目录下,不想在项目中每次都通过require("…/assets/image/1.jpg")这样写一长串去引用。能否通过 类似nuxt中的快速引用?
<img src="/images/1.png" alt="" />
这里直接引用
export default ({mode})=>{
return defineConfig({
resolve:{
alias:{
"/images":"src/assets/images/"
//这里不能通过path模块解析路径的写法
}
},
}
}
7如何把vite打包以后的js,css和img资源分别分门别类在js/css/img文件夹中
//由于是处理打包以后的资源,所以需要配置build选项
export default ({mode})=>{
return defineConfig({
build:{
assetsDir:"static",
rollupOptions:{
input:{
index:resolve(__dirname,&#