当前位置:   article > 正文

Vite项目打包优化_vite new url(url, import.meta.url) 打包

vite new url(url, import.meta.url) 打包

一、一些基础报错

1.vite设置完别名之后,ts一直报错

  1. resolve: {
  2. alias:[
  3. {
  4. find:'@',
  5. replacement:path.resolve(__dirname,'src')
  6. }
  7. ]
  8. },

所有用到@/xxx的地方爆红解决办法:

  1. "suppressImplicitAnyIndexErrors": true,
  2. "paths":{
  3. "@": ["./src"],
  4. "@/*": ["./src/*"],
  5. }

2.引入js文件报错?

创建一个model/types这种目录(专用于存放类型检测文件的目录)新建一个chart.d.ts.内容要写成:

declare module '@/utils/chart.js';  (这后边是文件路径)重启vscode

3.引入图片方式改变

  1. const imgUrl = new URL('./img.png', import.meta.url).href
  2. rightMenu: [
  3. { iconClass: new URL('@/assets/images/index/index_right_2.png', import.meta.url).href, name: "课", style:"background: linear-gradient(-20deg, #FF8D8D, #FC4343);", path: "" },
  4. { iconClass: new URL('@/assets/images/index/index_right_3.png', import.meta.url).href, name: "日", style:"background: linear-gradient(-20deg, #FFD38D, #FC9F43);", path: "" },
  5. { iconClass: new URL('@/assets/images/index/index_right_6.png', import.meta.url).href, name: "图", style:"background: linear-gradient(-20deg, #FFAD8D, #FC6643);" ,path: ""},
  6. ],

二、开启Gzip压缩

  1. 安装 npm i -S vite-plugin-compression

  1. vite.config.ts配置

  1. import viteCompression from "vite-plugin-compression";
  2. plugins: [
  3.     vue(),
  4.     viteCompression({
  5.     verbose: true, // 默认即可
  6.     disable: false, //开启压缩(不禁用),默认即可
  7.     deleteOriginFile: false, //删除源文件
  8.     threshold: 10240, //压缩前最小文件大小
  9.     algorithm: 'gzip', //压缩算法
  10.     ext: '.gz', //文件类型
  11.     })
  12. ]

三、按需引入e

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/86427
推荐阅读
相关标签
  

闽ICP备14008679号