谈谈我是怎么样用vite替换webpack的
前言
都已经 2202 年了,vite
已经可以算是遍地开花了,这两年的关注度也比较高究其原因,还是因为苦webpack
久矣;
随着项目功能越来越多,代码越来越复杂,随之而来的就是项目的各种慢(ps:跑个项目的时间都能去茶水间打杯水回来喝一会儿了 😭😭😭)
至于原因,简短来说,就是webpack
需要去索引整个项目的文件,编译成一个或多个单独的 js 文件;而vite
则是在浏览器请求对应 URL 的时候,再提供对应的文件,更详细的还是去瞅瞅 vite 的自荐吧
开搞
开始进入正题
1. 修改项目配置
终端输入npm i -D vite
安装 vite
修改pageage.json
中的相关命令
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
2. 在根目录创建vite.config.js
文件
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import path from 'path'
export default defineConfig({
base: './',
plugins: [createVuePlugin()],
server: {
open: true // 启动完成之后自动打开浏览器
},
resolve: {
alias: [
{
find: '@',
replacement: path.resolve(__dirname, 'src')
} // 使用这种方式可以引入.vue文件,但是图片会404
{
find: '/@',
replacement: 'src'
}, // 解决图片使用别名404,@符号前面需要加'/',也没有用绝对路径
]
}
})
3. 修改环境变量
在 vite 中已经不支持原来的process.env
来访问环境变量了
需要改为import.meta.env
来访问,在.env 文件中的变量也需要把前缀改为VITE_
(ps:也可以通过在vite.config
中设置envPrefix
来自定义前缀)
如以下代码:
VITE_APP_API_URL=/api
VITE_TITLE=title
4. 配置全局的 css 变量
在vue-cli
中是借助了style-resources-loader
来实现的全局变量,在vite
中直接通过 css.preprocessorOptions
就可以进行配置
css: {
preprocessorOptions: {
less: {
additionalData: `@import './src/assets/style/variables.less';`
}
}
}
5. 修改 index.html 文件
首先将public
文件夹下的index.html
移动到根目录
在index.html
中引入 src 目录下的main.js
文件
<script type="module" src="/src/main.js"></script>
还有一个就是 vite 默认不支持 ejs 的语法(ps:其实有尝试用过vite-plugin-html
插件,但是会启动报错 😛😛),在当前项目中也没有实际性的意义,就不折腾啦,所以改为了原生写法
- <link rel="icon" href="https://blog.csdn.net/qq_26314225/article/details/<%= BASE_URL %>favicon.ico">
- <title><%= VUE_APP_NAME %></title>
# 改为了下面这样
<link rel="icon" href="https://blog.csdn.net/qq_26314225/article/details/favicon.ico">
<title>Title</title>
做完上面几步,就可以输入npm run dev
来运行项目了
遇到的一些问题
1. 不支持 require
重写require
的方法来引入图片
// 因为只有图片引入还在使用require,所以就只用于图片引入了
window.require = url => {
if (typeof url === 'undefined') return
return new URL(url, import.meta.url).href
}
部分插件是用 require 来加载的,统一改为 import 来引入
// const CodeMirror = require('codemirror/lib/codemirror')
// require('codemirror/addon/hint/show-hint')
import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/addon/hint/show-hint'
2. TypeError: Failed to fetch dynamically imported module
原因的话是因为vite
不支持对.vue
后缀的识别,在引入组件的文件路径上补充.vue
后缀就好啦
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfeecfc
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13