关于vue.js:项目开发中到底能不能使用vite干货分享

前言

就在 2020 的最初一天, 我把公司的一个小我的项目降级到了vue3, 我的项目很简略, 外围性能就是一个 H5 拼图(公司外部我的项目, 不便给出链接)

原来的我的项目架构:vue2 + vue-cli2 + vant

降级后的我的项目架构: vue3 + vite1.0 + vant

一天工夫重构上线, 在元旦节中应用一切正常 ????

上面咱们不卑不亢, 来探讨下 vue3 及vite1.0

vite降级到了 2.0

元旦节的时候, 尤雨溪送给了咱们一个跨年礼物, 公布了 vite 的 2.0 版本

是不是很震惊!1.0的还没用呢,2.0的就进去了?

不要慌, 在我看来 2.0 最次要的更新点就是 vite 和vue解耦, 还有就是出了 vite 官网文档, 尽管是英文版, 但急躁看下来, 也能够看懂个七七八八

我在应用 vite 中遇到的槽点

很多人其实并没有拿 vite 用于正式的我的项目开发中, 仅仅是用 vite 运行下 vue3 跑跑 demo。因为当初基于 webpack 构建的脚手架足够稳固及好用。

vite的长处显而易见, 集体认为当前很有可能代替 webpack, 那vite 在正式我的项目开发中体现如何呢?

上面就我本人在 vite 应用中遇见的槽点而言, 和大家分享下现阶段 vite 应用上的一些不爽之处, 如有谬误, 欢送留言评论。

require不能应用

在应用 vue-cli 的时候, 出于业务须要咱们可能须要这样援用图片

{imgUrl:require("../assets/images/bg.png")
}
复制代码

而后在 template 中应用

<img :src="imgUrl" alt="">
复制代码

如何图片的门路是动静的, 咱们也须要应用 require 援用, 从而让框架在打包的时候剖析出正确的门路

但这种图片援用计划在 vite 中并不能用, 浏览器中会报 require 相干谬误

这种报错天然能够了解, 因为 vite 应用的是浏览器自带的 module 去解析 js 的, 而 require 语法是 node 语法, 天然报错, 然而 vite 并没有给出正当的解决方案。

最初只好是把须要 require 引入的图片放到 public 文件夹下????, 这样打包前后门路都不会被解决, 能够保障门路的正确性

全局 css 文件无奈配置

在 vue-cli 中咱们能够应用 css 预处理器 来提取专用 css 变量及 css 函数并放在一个文件中, 而后再 vue.config.js 中如下配置

module.exports = {
  css: {
    // 不必在每一个页面都进行引入款式，就能间接援用。loaderOptions: {
      sass: {prependData: `@import '@/assets/scss/variables.scss';`}
    }
  }
}
复制代码

这样咱们就能够在任何 sass 文件中都能够应用到 sass 变量了

但在 vite 中却没有提供这样的配置????, 官网也提供了如何配置 css 变量

export default {
  css: {
    preprocessorOptions: {
      scss: {additionalData: `$injectedColor: orange;`}
    }
  }
}
复制代码

然而, 如果我想把所有的变量及函数抽离到一个文件中引入, 像以下这样:

export default {
  css: {
    preprocessorOptions: {
      scss: {additionalData: "@import'../assets/scss/_base.scss';" // 有效}
    }
  }
}
复制代码

发现并不起作用

去 vite 的issues中发现有人也提及了相似的问题

尤雨溪的答复也很简略

意思就是应用 poctss-import 来配置全局 css, 然而并没有说如何配置(有晓得的大佬能够再上面评论哦)

谬误提醒不敌对

相比于 vue-cli,vite 的谬误提醒并不是非常敌对, 有些时候页面也不报错也不进去任何货色。遇到这种状况时, 咱们能够重新启动框架试试, 还有就是在援用 .vue 文件时, 后缀名不能省略。

举荐应用 vite

vite自身曾经足够欠缺, 可能在一些工程化及社区建设方面比 webpack 差了一些, 但总体体验下来, 很多中央都是能够无缝迁徙的, 速度的确比 webpack 快, 打进去的包也比 webpack 小, 上面是同样的代码打进去的包体积的比照:

对 vue3 的认识

vue3外部的优化就不探讨了, 咱们说下开发体验

代码量增多

能够感觉到, 在应用 vue3 时所有都变成的函数, 且在应用 vuex 和vue-router也大有不同

import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";

export default {setup() {const route = useRoute();
    const router = useRouter();
    const store = useStore();}
复制代码

无形之中的确减少了些代码量

代码变的更灵便

vue3 最大的更新就是 composition-api, 全新的语法及代码构造, 从 api 要做的事来讲的确是减少的代码的灵活性, 代码的可组织性的确变高的很多。

然而, 在事实开发中, 咱们很可能一不小心就写出 setup 中有很多代码的状况, 你可能也会遇到如下场景:

共事小张:  能够把代码抽离进去, 放到不同的文件夹, 便于保护啊!

我:  抽离进去就又会多进去几个 js 文件, 对我来说并不便于保护啊!

共事小张: 你懂啥, 我看你就是懒吧!

我:  是啊, 工夫紧工作重, 哪有工夫整顿啊!
复制代码

只能说现实和事实总是有差异的, 任何货色都是一把双刃剑, 你感觉呢?

作者：刘小灰