vite实践遇到的问题[vite:build-html] EIS
2021-10-29 本文已影响0人
云鹤道人张业斌
企业微信截图_85e28ab6-c22d-4344-9397-6ea68fd46f9a.png
使用vite打包出现的错误，开发环境运行正常。
经过排查是因为link的href为空，删掉href后打包正常。
唔，资源引入这块要注意了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
// href不能为空，删掉href
<link rel="icon" href="" />
<title>Vite App</title>
</head>
</html>
一. 记录一下 <script setup></script>是真的香
- await直接用
- 不需要引入defineComponent
- 不需要return，方法，监听等直接写
- 在component中的自定义组件也不需要引入，可以直接用
- 如果需要定义name(keep-alive用)，可以单独导出
<script setup>
export default {
name: 'mycomponent'
}
</script>
- 如果你发现引入直接用的时候，提示你知未被使用.禁用vetur相关插件即可
<script setup>
import data from '@/assets/websites.json'
</script>
'data' is declared but its value is never read
二.process is not defined
process.env找不到（process is not defined）
问题解决：在vite.config.js中添加define: { 'process.env': {} },即可解决
关于这一点更多的更细致的描述，请查看另一篇实践 vite + vue3多页面配置记录references,loadEnv等
三.动态图片动态
const newUrl = new URL(`../assets/img/${jpg}`, import.meta.url)
<img :src="newUrl" alt="">
四.图片后缀不要用大写
企业微信截图_9a1bdb32-616b-498b-9a0d-2aa774946e5b.png
更多vite相关的配置，我在另一篇有记录vite + vue3多页面配置记录references,loadEnv等
