|
Условная компиляция для Vue/JavaScript устроена не также просто, как на C/C++, но все же кое-какие возможности для этого есть. Для реализации исключения некоторых блоков кода можно использовать разные подходы, описанные далее как Вариант 1, Вариант 2, Вариант 3, Вариант 4.
[Вариант 1: плагин vite-plugin-conditional-compiler]
Самый простой способ — использовать плагин, который работает с Vite, например vite-plugin-conditional-compiler.
1. Установка, в корне Vue-проекта выполните команду:
$ npm install -D vite-plugin-conditional-compiler
added 8 packages, and audited 628 packages in 12s
210 packages are looking for funding
run `npm fund` for details
21 vulnerabilities (1 low, 3 moderate, 15 high, 2 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
npm warn allow-scripts 3 packages have install scripts not yet covered by allowScripts:
npm warn allow-scripts @parcel/watcher@2.5.4 (install: node-gyp rebuild)
npm warn allow-scripts esbuild@0.21.5 (postinstall: node install.js)
npm warn allow-scripts vue-demi@0.14.10 (postinstall: node -e
"try{require('./scripts/postinstall.js')}catch(e){}")
npm warn allow-scripts
npm warn allow-scripts Run `npm approve-scripts --allow-scripts-pending`
to review, or `npm approve-scripts < pkg>` to allow.
2. Настройка vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import conditionalCompiler from 'vite-plugin-conditional-compiler'
export default defineConfig({
plugins: [
vue(),
conditionalCompiler({
// Определяем переменные для условной компиляции
defines: {
// В продакшене исключаем блок SOME_CODE
INCLUDE_SOME_CODE: process.env.VITE_INCLUDE_SOME_CODE !== 'false'
, // Или можно использовать явный флаг
// SOME_CODE_ENABLED: true // или false
}
})
]
})
3. Теперь в любом месте JavaScript кода можно использовать директивы #if следующим образом:
//#if INCLUDE_SOME_CODE
import SomeCode from '@/views/SomeCode.vue'
//#endif
[Вариант 2: плагин rollup-plugin-conditional-compilation]
1. Установка:
npm install -D rollup-plugin-conditional-compilation
2. Настройка vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import conditional from 'rollup-plugin-conditional-compilation'
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
plugins: [
conditional({
debug: false,
// Определяем переменные
variables: {
SOME_CODE_ENABLED: process.env.VITE_SOME_CODE_ENABLED !== 'false' // по умолчанию true
}
})
]
}
}
})
Далее можно использовать все те же операторы #if, как Варианте 1:
//#if SOME_CODE_ENABLED
import SomeCode from '@/views/SomeCode.vue'
//#endif
[Вариант 3: плагин @rollup/plugin-replace]
Если вам нужно только удалить целый блок, можно использовать простой подход с плагином @rollup/plugin-replace.
1. Установка:
npm install -D @rollup/plugin-replace
2. Настройка vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import replace from '@rollup/plugin-replace'
export default defineConfig({
plugins: [
vue(),
replace({
// Включаем/выключаем SOME_CODE через переменную окружения
__SOME_CODE_ENABLED__: JSON.stringify(process.env.SOME_CODE_ENABLED !== 'false'),
preventAssignment: true
})
]
})
3. Пример применения:
// ... остальной код
routes: [
// ... другие маршруты
__SOME_CODE_ENABLED__ && {
path: '/somecode',
name: 'somecode',
component: SomeCode, },
// ... остальные маршруты
].filter(Boolean) // Убираем false элементы
[Запуск компиляции с разными конфигурациями]
Для сборки без SOME_CODE:
# Вариант 1
VITE_INCLUDE_SOME_CODE=false npm run build
# Вариант 2 и 3
SOME_CODE_ENABLED=false npm run build
Для сборки с SOME_CODE (по умолчанию):
npm run build
[Дополнительные советы]
1. Для разработки вы можете оставить SOME_CODE включенным, а исключать только в продакшене:
// vite.config.js
conditionalCompiler({
defines: {
INCLUDE_SOME_CODE: process.env.NODE_ENV === 'development' // Только в разработке
}
})
2. Проверьте результат после сборки — откройте собранный файл и убедитесь, что блок с /somecode полностью отсутствует.
3. Не забудьте импортировать SomeCode только внутри условного блока, чтобы избежать ошибок "неиспользуемый импорт".
[Вариант 4: без использования плагина]
Это самый надежный способ для Vite, работающий без дополнительных плагинов.
1. Создайте файл .env в корне проекта со следующим содержимым:
VITE_ENABLE_SOME_CODE=false
2. В коде JavaScript используйте:
// Переменная VITE_ENABLE_SOME_CODE доступна напрямую в JS:
const isSomeCodeEnabled = computed(() => import.meta.env.VITE_ENABLE_SOME_CODE === 'true')
После этого используйте условную компиляцию для добавления или исключения нужного кода (config.js или любой другой JS файл):
// Условный импорт
let SomeCodeView;
if (isSomeCodeEnabled) {
SomeCodeView = () => import('@/views/SomeCodeView.vue');
}
// Условное добавление в массив
const routes = [
{ path: '/', component: HomeView },
{ path: '/settings', component: SettingsView },
// ... другие маршруты
];
if (isSomeCodeEnabled) {
routes.push({
path: '/somecode',
name: 'somecode',
component: SomeCodeView,
});
}
4. В шаблоне HTML используйте v-if для динамического управления содержимым страницы, например:
< li v-if="isSomeCodeEnabled" class="nav-item">
< SomeCodeLink to="/somecode" class="nav-link" active-class="active">
Ссылка на SomeCode< /SomeCodeLink>
< /li>
Вариант 1 с vite-plugin-conditional-compiler наиболее стабильно работает с Vite и поддерживает синтаксис #if/#endif, который чище выглядит в коде. Мне подошел вариант 4.
[Ссылки]
1. Vue 3, быстрый старт. |
