vite.config.js配置入门详解
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,"index.html"), project:resolve(__dirname,"project.html") }, output:{ chunkFileNames:'static/js/[name]-[hash].js', entryFileNames:"static/js/[name]-[hash].js", assetFileNames:"static/[ext]/name-[hash].[ext]" } }, }, } }
8 如何通过vite给项目配置多个环境?
以开发、测试和生产环境为例
(1)在项目根目录下分别新建.env.development,.env.test,.env.production文件
//.env.devopment文件内容 NODE_ENV="development" VITE_APP_BASEAPI="https://www.dev.com" //.env.test文件内容 NODE_ENV="test" VITE_APP_BASEAPI="https://www.test.com" //.env.production文件内容 NODE_ENV="production" VITE_APP_BASEAPI="https://www.production.com"
(2) package.json文件做如下修改
"scripts": { "dev": "vite --mode development", "build": "vite build --mode production", "test": "vite build --mode test", "preview": "vite preview" },
(3)项目中通过Import.meta.env.VITE_APP_BASEAPI来获取对应环境的值
<template> <div> <Item></Item> </div> </template> <script setup> import { defineComponent, onMounted, ref } from 'vue' import Item from "@c/item.vue" console.log("env", import.meta.env.VITE_APP_BASEAPI) console.log("可选链", obj?.gender || "male") }) </script>
9 vite中如何配置多入口,进行多页面开发?
step1:在根目录新建一个入口页面以project.html为例,同时在根目录下新建一个project文件夹,在此文件夹新建一个main.js,App.vue
step2:vite.config.js作如下修改:
import { defineConfig,loadEnv } from 'vite' import {resolve} from "path"; export default ({mode})=>{ return defineConfig({ build:{ rollupOptions:{ input:{ index:resolve(__dirname,"index.html"), project:resolve(__dirname,"project.html") }, //output:{ // chunkFileNames:'static/js/[name]-[hash].js', //entryFileNames:"static/js/[name]-[hash].js", //assetFileNames:"static/[ext]/name-[hash].[ext]" } }, }, plugins: [ vue(), ] }) }
step3:vite run dev 启动以后在url加上project.html查看project项目 localhost:3000/project.html
10 如何设置开启生产打包分析文件大小功能?类似webpack-bundle-analyzer?
//1 安装rollup-plugin-visualizer 插件 npm i rollup-plugin-visualizer //2 vite.config.js中引入插件 import {visualizer} from "rollup-plugin-visualizer" export default ({mode:string})=>{ const plugins=[ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()] }), visualizer({ open:true, //注意这里要设置为true,否则无效 gzipSize:true, brotliSize:true }) ]; } return defineConfig({ resolve:{ alias:{ "@":resolve(__dirname,"src"), "/images":"src/assets/images/" } }, plugins })
11 如何解决require is not define报错的的问题? 场景: 比如我们assets文件夹下有一个静态的json:
list:[ { shop_id:1, shop_name:'搜猎人艺术生活', products:[ { pro_id:101, text:'洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶', price:480, num:1, img:require("./images/1.png"), sum:480, checked:false//商品选中状态 }, { pro_id:102, text:'花露水花露水花露水花露水花露水花露水花露水花露水', price:680, num:1, img:require('./images/2.png'), sum:680, checked:false }, { pro_id:103, text:'燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片', price:380, num:1, img:require('./images/3.png'), sum:380, checked:false } ], check:false,//店铺选中状态 choose:0,//商品选中个数 }, { shop_id:2, shop_name:'卷卷旗舰店', products:[ { pro_id:201, text:'剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀', price:580, num:1, img:require('./images/4.png'), sum:580, checked:false }, { pro_id:202, text:'卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸', price:780, num:1, img:require('./images/5.png'), sum:780, checked:false } ], check:false, choose:0, }, ], status:false,//全选选中状态 allchoose:0,//店铺选中个数 allsum:0,//总计价格 allnum:0,//总计数量 } export default fetchData
此时运行你回发现报错:require is not define? 解决办法:
const fetchData={ list:[ { shop_id:1, shop_name:'搜猎人艺术生活', products:[ { pro_id:101, text:'洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶', price:480, num:1, img:new URL("./images/1.png",import.meta.url).href, sum:480, checked:false//商品选中状态 }, { pro_id:102, text:'花露水花露水花露水花露水花露水花露水花露水花露水', price:680, num:1, img:new URL('./images/2.png',import.meta.url).href, sum:680, checked:false }, { pro_id:103, text:'燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片', price:380, num:1, img:new URL('./images/3.png',import.meta.url).href, sum:380, checked:false } ], check:false,//店铺选中状态 choose:0,//商品选中个数 }, { shop_id:2, shop_name:'卷卷旗舰店', products:[ { pro_id:201, text:'剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀', price:580, num:1, img:new URL('./images/4.png',import.meta.url).href, sum:580, checked:false }, { pro_id:202, text:'卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸', price:780, num:1, img:new URL('./images/5.png',import.meta.url).href, sum:780, checked:false } ], check:false, choose:0, }, ], status:false,//全选选中状态 allchoose:0,//店铺选中个数 allsum:0,//总计价格 allnum:0,//总计数量 } export default fetchData
注意引用方式的变化:require------->new URL('./images/5.png',import.meta.url).href
到此这篇关于vite.config.js配置入门详解的文章就介绍到这了,更多相关vite.config.js配置内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/baidu_41601048/article/details/1226957
相关文章
IntelliJ IDEA2021.1 配置大全(超详细教程)
这篇文章主要介绍了IntelliJ IDEA2021.1 配置大全(超详细教程),需要的朋友可以参考下...2021-04-18- VPN可以虚拟出一个专用网络,让远处的计算机和你相当于处在同一个局域网中,而中间的数据也可以实现加密传输,用处很大,特别是在一些大公司,分公司处在不同的区域。...2016-01-27
- 这篇文章主要介绍了Tomcat配置及如何在Eclipse中启动,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-04
- 如果我们需要安培Laravel4的话最php最低要求要在php5.3.7版本并且我们需要把mcrypt与openss这两个扩展开启才可以,具体步骤我们参考下文。 前面我们介绍我了 com...2016-11-25
详解Maven profile配置管理及激活profile的几种方式
这篇文章主要介绍了详解Maven profile配置管理及激活profile的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-26- 这篇文章主要介绍了IDEA如何添加配置文件到classpath中,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-19
- 通常php.ini的位置在:复制代码 代码如下:/etc目录下或/usr/local/lib目录下。如果你还是找不到php.ini或者找到了php.ini修改后不生效(其实是没找对),请使用如下办法:1.新建php文件,写入如下代码复制代码 代码如下:<?phpe...2014-05-31
- 以下就是部署PHP时的4个配置修改说明,大家一个一个进行学习研究。1、short_open_tag 是什么呢? 决定是否允许使用代码开始标志的缩写形式(<? ?> )。如果要和 XML 结合使用PHP,可以禁用此选项以便于嵌入使用<?x...2015-10-21
- 在使用vue-router的项目中,实例化VueRouter是其配置选项routes该选项指定路由与视图的组件的关系或者路由与其他路由的关系,Router配置选项中是其中最重要的配置。本文就详细的介绍一下...2021-10-25
华为畅享20Pro配置怎么样?华为畅享20Pro参数配置分析
华为畅享20Pro配置怎么样?对于即将上市的华为畅享20 Pro手机,很多的网友们也是相当关注的,大家都想要知道这款华为畅享20 Pro手机的配置到底怎么样,赶紧看看吧...2020-06-29- vue项目中有一些方法需要在多个页面调用,但为了避免在每个页面都import进来,可以把方法加到原型上去,这样在每个组件中都能使用了,下面这篇文章主要给大家介绍了关于配置vue全局方法的两种方式,需要的朋友可以参考下...2021-09-13
详解element-ui 表单校验 Rules 配置 常用黑科技
这篇文章主要介绍了element-ui 表单校验 Rules 配置 常用黑科技,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11tomcat9 下载安装和配置+整合到eclipse的教程详解
这篇文章主要介绍了tomcat9 下载安装和配置+整合到eclipse,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-28- 这篇文章主要介绍了pytest配置文件pytest.ini的详细使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 今天研究了个开源项目,数据库是mysql的,其中的脚本数据需要备份,由于本人的机器时mac pro,而且mac下的数据库连接工具都不怎么好用,就想着如何利用windows下的数据库连接工具使用,并做相关备份,另外windows系统下的sqlyo...2015-10-21
- 这篇文章主要介绍了vue配置多代理服务接口地址操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-08
mysql(master/slave)主从复制原理及配置图文详解
这篇文章主要介绍了mysql(masterslave)主从复制原理及配置图文详解,以前脚本之家小编发过相关的内容,但这么好的非常少见特分享一下,需要的朋友可以参考下...2016-06-12- 这篇文章主要介绍了springboot中nacos动态路由的配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-11
- 系统:centos 5.9 环境:apache 2.2.25 tomcat 7.0.42 jdk 1.7.0 1.安装apache 我这里是直接yum安装的,如果你们要编译安装也不是不行. 代码如下 ...2016-01-28
- 明明我的手机配置那么高(都八核了)为什么玩游戏还会卡?对安卓手机来说玩游戏卡顿的原因一般有两种;性能不足导致的卡顿以及CPU发热降频导致的卡顿,详情我们来看看吧...2017-07-06