使用vite创建vue3之vite.config.js的配置方式

 更新时间:2024年08月07日 09:28:00   作者:ing*_*  
这篇文章主要介绍了使用vite创建vue3之vite.config.js的配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

使用vite创建vue3之vite.config.js配置

都是自我的学习中理解,有不对的不到位的欢迎大佬们指出。

参考文件:Node.js中文网

创建文件后原始内容

知识点

url.fileURLToPath()函数字面意思就是把文件URL解码为路径字符串,并给定的文件URL转换为路径时正确地附加/调整了URL控制字符 (/,%)。

首先要明白在nodejs中path模块的导入方式 :

在vue cli 使用webpack环境中:

    const path = require('path')
    const pathName = path.join(__dirname,'index.html')

但是在vite中使用上面的导入方式就会发现vite在ES 模块里面没有定义require,需要用import来代替。

   import path from 'path'
    const pathImport = path.join(__dirname,'index.html')

使用import也会报错的哦,__dirname is nodt defined in ES module scope。

alias 别名,resolve.alias,两种类型,一个是对象的类型,另一个是数组的类型。

// 第一种写法
  resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url))}} 
 // 第二种写法
   resolve: {alias: [{  find:'@',  replacement: fileURLToPath(new URL('./src', import.meta.url))}] }

代理配置

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决vue-pdf的签章不显示问题记录

    解决vue-pdf的签章不显示问题记录

    文章介绍了使用vue-pdf@4.3.0时遇到的上传特殊PDF文件无法正常预览的问题,通过查看控制台报错信息,发现是因为缺少字体导致的,解决方法是修改pdfjs-dist库的代码,注释掉隐藏电子签章的代码,为了在生产环境中应用这个修改,使用了patch-package插件,感兴趣的朋友一起看看吧
    2024-11-11
  • 关于在Vue中import和require的用法分析

    关于在Vue中import和require的用法分析

    在Vue项目中,我们经常需要引入外部的模块或文件,这时候就会用到import和require这两个关键字,本文将详细分析它们的用法,并提供具体的代码实例和解释,需要的朋友可以参考下
    2023-06-06
  • Bootstrap+Vue滑动监听Scrollspy实现餐厅餐品展示

    Bootstrap+Vue滑动监听Scrollspy实现餐厅餐品展示

    本文主要介绍了Bootstrap+Vue滑动监听Scrollspy实现餐厅餐品展示,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • vue数据变化但页面刷新问题

    vue数据变化但页面刷新问题

    这篇文章主要介绍了vue数据变化但页面刷新问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue子组件向父组件传值示范方法

    Vue子组件向父组件传值示范方法

    这篇文章主要介绍了Vue子组件向父组件传值方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-03-03
  • nuxt 实现在其它js文件中使用store的方式

    nuxt 实现在其它js文件中使用store的方式

    这篇文章主要介绍了nuxt 实现在其它js文件中使用store的方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 使用Nuxt.js改造已有项目的方法

    使用Nuxt.js改造已有项目的方法

    这篇文章主要介绍了使用Nuxt.js改造已有项目的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 使用Element-UI的NavMenu如何隐藏自带的小箭头

    使用Element-UI的NavMenu如何隐藏自带的小箭头

    这篇文章主要介绍了使用Element-UI的NavMenu如何隐藏自带的小箭头问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 用vue封装插件并发布到npm的方法步骤

    用vue封装插件并发布到npm的方法步骤

    本篇文章主要介绍了用vue封装插件并发布到npm的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • ant design vue pro 支持多页签模式问题

    ant design vue pro 支持多页签模式问题

    这篇文章主要介绍了ant design vue pro 支持多页签模式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11

最新评论