美文网首页
vite实践遇到的问题[vite:build-html] EIS

vite实践遇到的问题[vite:build-html] EIS

作者: 云鹤道人张业斌 | 来源:发表于2021-10-29 10:41 被阅读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>是真的香
  1. await直接用
  2. 不需要引入defineComponent
  3. 不需要return,方法,监听等直接写
  4. 在component中的自定义组件也不需要引入,可以直接用
  5. 如果需要定义name(keep-alive用),可以单独导出
<script setup>
   export default {
       name: 'mycomponent'
   } 
</script>
  1. 如果你发现引入直接用的时候,提示你知未被使用.禁用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等

相关文章

网友评论

      本文标题:vite实践遇到的问题[vite:build-html] EIS

      本文链接:https://www.haomeiwen.com/subject/hfkialtx.html