Можно ли использовать Vite в разработке проекта?

Vue.js

предисловие

Буквально в последний день 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Запустите демо. потому что теперь на основе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Он уже достаточно совершенен, и может быть лучше, чем какое-то инженерное и общественное строительство.webpackЭто немного хуже, но общий опыт таков, что многие места могут быть перенесены без проблем, и скорость действительно выше, чемwebpackБыстро, пакет, который выходит, лучше, чемwebpackSmall, ниже приведено сравнение размера пакета одного и того же кода:

Просмотры на 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();
  }

Незримо увеличилось количество кода

Код становится более гибким

Самое большое обновление vue3composition-api, Новый синтаксис и структура кода с точки зрения того, что должен делать API, действительно должны повысить гибкость кода, и организация кода действительно намного выше.

Однако в реальной разработке мы, скорее всего, случайно напишемsetupВ случае большого количества кода вы также можете столкнуться со следующими сценариями:

同事小张:  可以把代码抽离出来,放到不同的文件夹,便于维护啊!

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

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

我:  是啊,时间紧任务重,哪有时间整理啊!

Можно только сказать, что между идеалом и реальностью всегда есть разница.Все это палка о двух концах, как вы думаете?

наконец

Если вы что-то получили, пожалуйста, дайте щедрый палец вверх 😚

Категории