位置: IT常识 - 正文

vite基本配置教程(vite搭建项目)

编辑:rootadmin
vite基本配置教程

推荐整理分享vite基本配置教程(vite搭建项目),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vite 配置,vi 配置,vite基本配置教程,vite config,vite config,vite配置babel,vite config,vite config,内容如对您有帮助,希望把文章链接给更多的朋友!

👩 个人主页:不爱吃糖的程序媛 🙋‍♂️ 作者简介:前端领域新星创作者、CSDN内容合伙人,专注于前端各领域技术,成长的路上共同学习共同进步,一起加油呀! ✨系列专栏:前端面试宝典、JavaScript进阶、vue实战 📢 资料领取:前端进阶资料以及文中源码可以在🎈公众号“不爱吃糖的程序媛”领取

最近做项目要求将webpack打包方式换成vite,下面将详细讲解一下配置vite需要修改哪些文件,以及过程中踩到的奇葩坑。

vite官网文档网址:https://vitejs.cn

1.新建viteconfig.js文件

一般在vue-cli项目中会有一个vueconfig.js文件,里面会有webpack配置; 那么新建一份viteconfig.js文件,里面是vite配置。

//该项目的版本是node12,有时候import引入不进去,就会用const替代import { defineConfig, loadEnv } from 'vite';//defineConfig是一个工具函数,不用 jsdoc 注解也可以获取类型提示//加载环境变量(loadEnv),loadEnv接收三个参数,第一个是.env后面的名字,第二个是绝对路径,第三个参数是你环境变量名的前缀,在vite中默认是VITE_。比如loadEnv(‘abc’, process.cwd(), 'ENV');//引入vite扩展插件const { createVuePlugin } = require('vite-plugin-vue2');const vitePluginHtmlConfig = require('vite-plugin-html-config');const { viteExternalsPlugin } = require('vite-plugin-externals');import path from 'path';import cdnConfig from './cdn.config';const resolve = (dir) => path.resolve(__dirname, dir);export default defineConfig(({ command, mode }) => { const envParams = loadEnv(mode, __dirname);//__dirname表示当前文件所处目录 return { root: resolve('./src'), // 入口index.html,注意入口js应该与index.html 同一目录下(只能写到目录,不能写到具体文件) base: './', publicDir: resolve('static'),//静态资源文件夹 resolve: { alias: { '@': resolve('src'),//作为 entries 的选项 }, extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], }, // 反向代理 server: { host: '0.0.0.0', //服务器ip地址 port: 5566, //本地端口 fs: { strict: false, // 支持引用除入口目录的文件 }, // open: true, // 是否自动在浏览器打开 proxy: { '/szapi': { target: 'https://tradesz.test.api.qywgpo.com/', changeOrigin: true, rewrite: (path) => path.replace(/^\/szapi/, ''), }, }, }, plugins: [ createVuePlugin(), // 打包babel编译 vitePluginHtmlConfig(cdnConfig.getCdnConfig()), // 使用cdn,传入分支参数判断使用哪种环境的js viteExternalsPlugin(cdnConfig.externals), // 打包过滤被引入cdn的包 ], build: { //打包环境移除console.log,debugger minify: 'terser', terserOptions: { compress: { drop_console: true, drop_debugger: true, }, }, //打包文件按照类型分文件夹显示 rollupOptions: { input: { main: path.resolve(__dirname, 'src/index.html'), }, output: { chunkFileNames: 'js/[name]-[hash].js', entryFileNames: 'js/[name]-[hash].js', assetFileNames: '[ext]/[name]-[hash].[ext]', }, }, }, };});共享配置root

类型: string

默认: process.cwd()

项目根目录(index.html 文件所在的位置)。可以是一个绝对路径,或者一个相对于该配置文件本身的相对路径。

base

类型: string

默认: /

开发或生产环境服务的公共基础路径。合法的值包括以下几种:

绝对 URL 路径名,例如 /foo/ 完整的 URL,例如 https://foo.com/ 空字符串或 ./(用于开发环境)

plugins

类型: (Plugin | Plugin[])[]

需要用到的插件数组。Falsy 虚值的插件将被忽略,插件数组将被扁平化(flatten)。

publicDir

类型: string | false

默认: “public”

作为静态资源服务的文件夹。该目录中的文件在开发期间在 / 处提供,并在构建期间复制到 outDir 的根目录,并且始终按原样提供或复制而无需进行转换。该值可以是文件系统的绝对路径,也可以是相对于项目的根目录的相对路径。

将 publicDir 设定为 false 可以关闭此项功能。

resolve.alias

类型:Record<string, string> | Array<{ find: string | RegExp, replacement: string }>

vite基本配置教程(vite搭建项目)

将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象,或一个 { find, replacement } 的数组。

当使用文件系统路径的别名时,请始终使用绝对路径。相对路径的别名值会原封不动地被使用,因此无法被正常解析。

构建选项build.rollupOptions

类型: RollupOptions

自定义底层的 Rollup 打包配置。这与从 Rollup 配置文件导出的选项相同,并将与 Vite 的内部 Rollup 选项合并。

2.新建index.html模板

这个文件是入口文件模板

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>交易平台</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta content="always" name="referrer" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="format-detection" content="telephone=no" /> <meta name="full-screen" content="yes" /> <meta name="x5-page-mode" content="app" /> <meta content="yes" /> <meta content="black" /> <meta content="telephone=no,email=no" /> <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script> </head> <body> <noscript> <strong >We're sorry but vue3.0 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong > </noscript> <div id="app-gpo-index-hide"> <div id="app-header"> <div class="app-header-left"> <img class="app-header-left-logo" src="https://gpo.oss-cn-shenzhen.aliyuncs.com/gpo/sys/qywlogo.png" alt="交易平台" /> <span class="app-header-left-span">交易平台1111111</span> </div> </div> <div id="app-body"></div> <div id="app-body-line"></div> <div id="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> </div> <div id="app"></div> <script type="module" src="./main.js"></script> </body></html>3.修改 package.json文件

原来的vue-cli的配置

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", },

修改后的vite配置,以及在这个文件里面还添加了些其他的vite依赖项

"scripts": { "serve": "vite", "build": "vite build", "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src", },4.修改 cdn.config.js文件const getCdnConfig = () => { const ret = {}; ret.scripts = cdn.js.map((e) => ({ src: e })); ret.links = cdn.css.map((e) => ({ rel: 'stylesheet', href: e })); return ret;};module.exports = { getCdnConfig,};5.修改 router/index.js文件

项目保留了webpack和vite两种打包方式,因此进来要判断、

const Blank = () => import('@/views/Basic/Blank');const NotAuth = () => import( '@/views/Basic/NotAuth');const NotFound = () => import( '@/views/Basic/NotFound');const Book = () => import('@/views/Operation/Book'); // 操作手册const BookItem = () => import('@/views/Operation/Book/Item'); // 操作手册(用户)----详情const isVite = () => typeof process === 'undefined' || !process.env.VUE_APP_ENV; //判断是否是viteconst routeList = [];if (isVite()) { const obj = import.meta.globEager('./*.js'); //拿到所有的批量导入js文件对象,vite里面的方法 const list = Object.entries(obj); list.forEach(([key, value]) => { if (!key.includes('index.js')) { routeList.push(value.default); } });} else {// 利用webpack的require.context,这样路由就不用一个一个引入 const importAll = require.context('@/router', false, /\.js$/); importAll.keys().forEach((path) => { if (!path.includes('index.js')) { routeList.push(importAll(path).default || importAll(path)); } });}export default new VueRouter({ mode: 'hash', routes: [ { path: '/', name: 'blank', component: Blank, }, { path: '/403', name: '403', component: NotAuth, }, { path: '*', name: '404', component: NotFound, }, { path: '/Book', component: Book, name: '操作手册(用户)', children: [ { path: 'Item', name: '操作手册(用户)----详情', component: BookItem, }, ], }, ...routeList, ],});vite的bug坑1.控制台请求不到auth.js和config.js的资源,报错404或者502

解决思路: 1.先试验文件是否引入正确; 2.再比较自己写的文件与参考的项目文件哪里不一样,可以借用工具对比;实在不行,就再对着原来项目文件重新按照顺序抄一遍也行。 3.最后发现bug居然是在proxy的 '/api’这里,因为在main.js文件那里是这样引入文件的, 在proxy的 ‘/szapi’。

/** * 入口文件 */// import Vue from 'vue';import VueBus from "vue-bus";// import $ from 'jquery';import "qywgpo-public/lib/static/iconfontv2/iconfont.css"; // 图标字体import "qywgpo-public/lib/index.css"; // 公共组件公共样式import "@/element";import "./../theme/index.css";import "@/assets/css/reset.css";import "@/assets/css/base.css";import "@/assets/css/components.css";import App from "@/App.vue";import router from "@/router";import store from "@/vuex/store";import auth from "@/api/auth";import pathConfig from "@/api/config";import config from "@/config"; proxy: { '/szapi': {//原来是/api target: 'https://tradesz.test.api.qywgpo.com/', changeOrigin: true, rewrite: (path) => path.replace(/^\/szapi/, ''), },},2.import.meta.globEager和import.meta.glob的坑先上干货

1.Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块:

const modules = import.meta.glob('./dir/*.js')

以上将会被转译为下面的样子: 匹配到的文件默认是懒加载的,通过动态导入实现,并会在构建时分离为独立的 chunk。

// vite 生成的代码const modules = { './dir/foo.js': () => import('./dir/foo.js'), './dir/bar.js': () => import('./dir/bar.js')}

2.如果你倾向于直接引入所有的模块(例如依赖于这些模块中的副作用首先被应用),你可以使用 import.meta.globEager 代替:

const modules = import.meta.globEager('./dir/*.js')

以上会被转译为下面的样子:

// vite 生成的代码import * as __glob__0_0 from './dir/foo.js'import * as __glob__0_1 from './dir/bar.js'const modules = { './dir/foo.js': __glob__0_0, './dir/bar.js': __glob__0_1}

请注意:

这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准 该 Glob 模式会被当成导入标识符:必须是相对路径(以 ./ 开头)或绝对路径(以 / 开头,相对于项目根目录解析)。 Glob 匹配是使用 fast-glob 来实现的 —— 阅读它的文档来查阅 支持的 Glob 模式。 你还需注意,glob 的导入不接受变量,你应直接传递字符串模式。

3.运行npm run serve会先进入入口页面,再进入主页面;但是运行npm run vueserve是直接进入主页面的。

4.启动vite运行命令,控制台不停的加载js

bug回溯

刚开始使用的是动态导入import.meta.glob,控制台报错,因为异步执行routeList挂出去可能会是一个空数组; 后面使用的是直接导入import.meta.globEager,可以理解为先拿到所有的导入文件,再将它挂出去,因此它能够拿到所有的路由地址。

拓展一下

require.context()方法 用法: require.context(directory,useSubdirectories,regExp)

directory:表示检索的目录 useSubdirectories:表示是否检索子文件夹(true或false) regExp:匹配文件的正则表达式,一般是文件名

例子: require.context(‘@/router’, false, /.js$/);

作用: 自动化批量导入文件,可以不用直接手写引入。

本文链接地址:https://www.jiuchutong.com/zhishi/290667.html 转载请保留说明!

上一篇:白霜覆盖下的山毛榉林,英格兰多塞特郡 (© Guy Edwardes/Minden Pictures)(山上覆盖着皑皑白雪)

下一篇:前端实现 微信扫码登录网站 pc端(二维码嵌套页面) 超详细,包会(前端实现微信联系人二维码)

  • 优酷怎样取消自动续费(优酷怎样取消自动扣款)

    优酷怎样取消自动续费(优酷怎样取消自动扣款)

  • 爱奇艺为什么叫桃厂(爱奇艺为什么叫鹅厂)

    爱奇艺为什么叫桃厂(爱奇艺为什么叫鹅厂)

  • 声卡可以让声音变得好听吗(声卡可以让声音变得低沉吗)

    声卡可以让声音变得好听吗(声卡可以让声音变得低沉吗)

  • qq转发可以屏蔽部分人吗(qq转发怎么不让别人看见)

    qq转发可以屏蔽部分人吗(qq转发怎么不让别人看见)

  • 热拔插轴什么意思(热插拔轴体怎么拔出来)

    热拔插轴什么意思(热插拔轴体怎么拔出来)

  • 语音怎么转发给别人(语音转发怎么转发微信)

    语音怎么转发给别人(语音转发怎么转发微信)

  • 24针连接器通过什么连接到主板(24针短接)

    24针连接器通过什么连接到主板(24针短接)

  • 电脑钉钉的缓存文件路径(电脑钉钉的缓存在哪里清除)

    电脑钉钉的缓存文件路径(电脑钉钉的缓存在哪里清除)

  • 手机同步是什么意思

    手机同步是什么意思

  • oppo手机有隐藏空间吗(oppo手机有隐藏系统吗)

    oppo手机有隐藏空间吗(oppo手机有隐藏系统吗)

  • 拼多多的市场定位(拼多多的市场定位和目标市场)

    拼多多的市场定位(拼多多的市场定位和目标市场)

  • 荣耀x10支持人脸识别吗(荣耀X10支持人脸吗)

    荣耀x10支持人脸识别吗(荣耀X10支持人脸吗)

  • 压缩文件下载后为什么是网页(压缩文件下载后无法打开)

    压缩文件下载后为什么是网页(压缩文件下载后无法打开)

  • 为什么通话录音只有自己声音(为什么通话录音不能播放)

    为什么通话录音只有自己声音(为什么通话录音不能播放)

  • q8300相当于什么cpu(q8300cpu参数)

    q8300相当于什么cpu(q8300cpu参数)

  • 骁龙730G是什么级别(骁龙730g是什么级别的处理器)

    骁龙730G是什么级别(骁龙730g是什么级别的处理器)

  • ddr4最高频率(i5-13600kddr4最高频率)

    ddr4最高频率(i5-13600kddr4最高频率)

  • 苹果7plus有3dtouch功能吗(苹果7plus有volte功能吗)

    苹果7plus有3dtouch功能吗(苹果7plus有volte功能吗)

  • 通信dcs什么意思(dcs是指什么信号)

    通信dcs什么意思(dcs是指什么信号)

  • 微信返回咋收不到新消息(微信返回咋收不到信息)

    微信返回咋收不到新消息(微信返回咋收不到信息)

  • 退款催促卖家处理按钮在哪(催买家退货)

    退款催促卖家处理按钮在哪(催买家退货)

  • 华为手表lon什么意思(华为手表中lon什么意思)

    华为手表lon什么意思(华为手表中lon什么意思)

  • vivo手机查看本机号码(vivo手机查看本机ip)

    vivo手机查看本机号码(vivo手机查看本机ip)

  • 苹果手机小爱同学使用方法(苹果手机小爱同学可以连接网易云音乐吗)

    苹果手机小爱同学使用方法(苹果手机小爱同学可以连接网易云音乐吗)

  • 拼多多第二天还能砍吗(拼多多第二天还可以给同一个人砍吗)

    拼多多第二天还能砍吗(拼多多第二天还可以给同一个人砍吗)

  • 趣步糖果怎么交易(趣步上的糖果怎么卖出)

    趣步糖果怎么交易(趣步上的糖果怎么卖出)

  • 苹果相机滤镜怎么设置(苹果相机滤镜怎么调参数)

    苹果相机滤镜怎么设置(苹果相机滤镜怎么调参数)

  • 人际交往的作用(人际交往的作用是什么)

    人际交往的作用(人际交往的作用是什么)

  • 企业将要购买一套房产
  • 财务往来账对账制度
  • 装修工程一切险
  • 固定资产分期付款会计处理
  • 个人微信转账可以认定劳动关系吗
  • 银行贷款受托支付后,钱怎么转回来
  • 收到保险公司开票怎么做账
  • 发票领用簿怎么领发票
  • 住宿发票丢了能重开吗
  • 融资租入的企业有哪些
  • 出售股份是利好吗
  • 差错更正要调去年的吗
  • 补发工资是否需要交税
  • 从农民手中购进农产品进项税
  • 专业合作社的业务范围
  • 水电费差价收入计算增值税公式是怎样的?
  • 商场超市印花税怎么样
  • 小额贷款公司可以跨区域经营吗
  • 税法关于印花税的规定
  • 什么叫增值税还是所得税
  • 定期定额户需要自己申报吗
  • 企业支付短期借款利息1000元
  • 预缴所得税多交了汇算时可以抵扣下一年的所得税吗
  • 企业购车按揭产生的费用
  • 坏账准备转回影响应交所得税吗
  • 债务利率的公式
  • 如何做预估成本
  • 待抵扣进项税额是二级还是三级
  • window10设置wifi热点
  • 收到退回多付款现金流量支付购买商品支付
  • 若依框架是什么框架
  • php加密方式有哪些
  • thinkphp自定义标签page
  • segment anything model模型 需要的配置
  • web网页设计期末作业猫眼电影首页
  • springboot+chatgpt+chatUI Pro开发智能聊天工具
  • 应收账款的平均余额怎么计算
  • 支付职工差旅费发生的现金流出
  • 怎么在网上增加办税人员
  • 生产企业成本会计做账流程
  • 原版小说推荐
  • 补充医疗保险属于什么
  • 平行结转的约当约当怎么计算
  • PostgreSQL分区表(partitioning)应用实例详解
  • mongodb快速入门
  • 冲销以前年度费用会计分录
  • mysql 虚拟机
  • 增值税扣缴义务发生时间为扣缴义务人扣缴税款的当天
  • 水电发票如何开
  • 企业购买理财产品收益要交税吗
  • 增值税加计抵扣账务处理
  • 什么时候计提增值税发票
  • 借分公司的款收据怎么开
  • 工伤费退回会计分录
  • 采购家具分批结算方式
  • 事业单位收入是再分配吗
  • 营业收入增长率分析
  • 全资子公司合并报表编制
  • 私营公司商业汇票怎么开
  • 计算机二级考试时间2024
  • linux那些事儿
  • win7系统更改ip地址
  • smon进程
  • 影响电脑速度的因素
  • 怎样把系统及软件迁移到固态
  • ie8-ie11浏览器
  • 电脑主板驱动
  • linux html编辑器
  • 学习软件
  • Android自定义对话框
  • linux中shell脚本编写
  • vue缓存数据
  • 安卓状态栏宽度
  • google gsoc
  • javascript的对象
  • 西安税务机关
  • 成都水费查询系统
  • 河北航天信息技术有限公司官网
  • 实收资本印花税税率多少
  • 个人所得税优惠政策最新2023年度
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设