# Конфигурация сборки
Конфигурация webpack для проекта с SSR аналогична конфигурации проекта только для клиентской стороны. Если ещё не знакомы с настройкой webpack, более подробную информацию можно найти в документации Vue CLI
# Ключевые отличия от сборки только для клиента
- Необходимо создать манифест webpack
"scripts": "build:client": "vue-cli-service build --dest dist/client", "build:server": "SSR=1 vue-cli-service build --dest dist/server", "build": "npm run build:client && npm run build:server", > # Пример конфигурации
Ниже приведён пример vue.config.js , который добавляет SSR в проект Vue CLI, но его можно адаптировать для любой сборки webpack.
const WebpackManifestPlugin > = require('webpack-manifest-plugin') const nodeExternals = require('webpack-node-externals') const webpack = require('webpack') module.exports = chainWebpack: webpackConfig => // Необходимо отключать cache-loader, иначе в сборке для клиента // будут использоваться кэшированные компоненты из сборки для сервера webpackConfig.module.rule('vue').uses.delete('cache-loader') webpackConfig.module.rule('js').uses.delete('cache-loader') webpackConfig.module.rule('ts').uses.delete('cache-loader') webpackConfig.module.rule('tsx').uses.delete('cache-loader') if (!process.env.SSR) // Определяем точку входа клиентской части приложения webpackConfig .entry('app') .clear() .add('./src/entry-client.js') return > // Определяем точку входа серверной части приложения webpackConfig .entry('app') .clear() .add('./src/entry-server.js') // Это позволяет webpack обрабатывать динамические импорты в соответствии // с подходом в Node, а также указывает `vue-loader` выдавать // серверно-ориентированный код при компиляции компонентов Vue. webpackConfig.target('node') // Это указывает сборке для сервера использовать экспорты в стиле Node webpackConfig.output.libraryTarget('commonjs2') webpackConfig .plugin('manifest') .use(new WebpackManifestPlugin( fileName: 'ssr-manifest.json' >)) // https://webpack.js.org/configuration/externals/#function // https://github.com/liady/webpack-node-externals // Экстернализация зависимостей приложения. Это сделает сборку для сервера // гораздо быстрее и создаст более лёгкий файл итоговой сборки. // Не нужно экстернализировать зависимости, которые должны обрабатываться webpack. // Также следует внести в белый список зависимости, которые изменяют `global` (например, полифилы) webpackConfig.externals(nodeExternals( allowlist: /\.(css|vue)$/ >)) webpackConfig.optimization.splitChunks(false).minimize(false) webpackConfig.plugins.delete('preload') webpackConfig.plugins.delete('prefetch') webpackConfig.plugins.delete('progress') webpackConfig.plugins.delete('friendly-errors') webpackConfig.plugin('limit').use( new webpack.optimize.LimitChunkCountPlugin( maxChunks: 1 >) ) > > # Предостережения для externals
Обратите внимание, что в опции externals в белый список добавляются CSS-файлы. Это связано с тем, что CSS импортируемый из зависимостей, всё равно должен обрабатываться webpack. Если импортируете файлы других типов, которые также полагаются на webpack (например, *.vue , *.sass ), их тоже следует добавить в белый список.
При использовании runInNewContext: ‘once’ или runInNewContext: true необходимо добавить в белый список полифилы, изменяющие global (например, babel-polyfill ). Это требуется для того, что при использовании режима нового контекста код внутри сборки для сервера будет иметь свой собственный объект global . Поскольку на сервере он не нужен, проще просто импортировать его в файл клиентской точки входа.
# Генерация clientManifest
В дополнение к серверной сборке также можно сгенерировать манифест клиентской сборки. Благодаря клиентскому манифесту и серверной сборке, рендерер будет иметь информацию как о серверной так и о клиентской сборках. Благодаря этому он сможет автоматически определять и внедрять директивы для preload / prefetch
Выгода от этого двойная:
- Он заменяет html-webpack-plugin для внедрения корректных URL ресурсов, когда в именах генерируемых файлов присутствуют хэши.
- При генерации сборки, которая использует возможности webpack по разделению кода, можно обеспечить preload / prefetch необходимых фрагментов, а также интеллектуально внедрять теги для требуемых асинхронных фрагментов, чтобы избежать водопада запросов на клиенте, тем самым улучшая TTI (time-to-interactive).
(opens new window)
Последнее обновление страницы: около 2 лет назад
Миграция с Vue CLI на Vite
Я недавно переносил свои проекты на Vue 2 со стэка Vue CLI и Webpack на Vite. После того, как я сделал это в третий раз, у меня сложилось представление об этом процессе, которое я излагаю в этой статье.
package.json Скопировать ссылку
devDependencies Скопировать ссылку
Давайте удалим зависимость @vue/cli-service и заменим её на vite ��
npm un @vue/cli-service npm i vite -D "devDependencies": < - "@vue/cli-service": "4.3.1", + "vite": "2.1.3",
Вы можете также удалить все остальные зависимости, которые начинаются с @vue/cli-plugin-xxx , поскольку они всё равно больше не будут работать, например:
npm un vue/cli-plugin-babel vue/cli-plugin-eslint vue/cli-plugin-unit-jest "devDependencies": < - "@vue/cli-plugin-babel": "4.3.1", - "@vue/cli-plugin-eslint": "4.3.1", - "@vue/cli-plugin-unit-jest": "4.3.1",
Если вы используете Vue 2, нужно будет добавить плагин vite-plugin-vue2 , который мы будем использовать в нашем vite.config.js :
npm i vite-plugin-vue2 -D "devDependencies": < + "vite-plugin-vue2": "1.4.2",
Также, если вы используете Git-хуки, без сомнения нужно будет установить yorkie , чтобы все заработало как раньше (думаю, что этот инструмент был частью Vue CLI, а в Vite его нет).
npm i yorkie -D scripts Скопировать ссылку
Мы заменим скрипт serve для Vue CLI на соответствующий скрипт для Vite:
"scripts": < - "serve": "vue-cli-service serve", + "dev": "vite",
Если вам ближе использование слова serve вместо dev , можете использовать и его.
Мы еще вернемся к скриптам build , test и lint в конце статьи.
index.html Скопировать ссылку
Давайте посмотрим на наш public/index.html , который мы должны переместить в корневую папку проекта.
Мы также должны добавить скрипт, который является точкой входа приложения и без которого Vite не сможет собрать проект:
И наконец, мы должны заменить путь до фавиконки favicon.ico на более простой /favicon.ico (Vite сможет отыскать его сам в папке public ).
- favicon.ico"> + … +
vite.config.js Скопировать ссылку
Мы должны переименовать наш файл с конфигурацией сборки с vue.config.js на vite.config.js .
В начале файла нужно указать следующее:
import < defineConfig >from 'vite' import < createVuePlugin >from 'vite-plugin-vue2' export default defineConfig(< plugins: [ createVuePlugin(), ], >) Чтобы сделать миграцию на Vite максимально прозрачной для вашей команды разработчиков, давайте оставим тот же порт 8080 , который и был:
import < defineConfig >from 'vite' import < createVuePlugin >from 'vite-plugin-vue2' export default defineConfig( < server: < port: 8080, >>) Все доступные опции для конфигурации можно посмотреть в документации.
@ alias Скопировать ссылку
Если вы используете псевдонимы Webpack для импортов в файлах вашего проекта, мы должны переопределить их:
import < defineConfig >from 'vite' import < createVuePlugin >from 'vite-plugin-vue2' export default defineConfig( < resolve: < alias: [ < find: '@', replacement: path.resolve(__dirname, 'src') >] >, >) Для пользователей WebStorm: при использовании Webpack вам достаточно было прописать в настройках IDE путь до файла с конфигурацией Webpack (для Vue CLI это был путь до базового файла Webpack: node_modules/@vue/cli-servive/webpack.config.js ) и WebStorm магическим образом подхватывал псевдоним @ , что позволяло очень просто обращаться к библиотекам.
Пока WebStorm не умеет парсить vite.config.js , и мы должны помочь ему, прописав настройки псевдонимов вручную в webStorm.config.js :
System.config(< paths: < '@/*': './src/*', >, >) Это всё, что вы должны сделать 🙂
Расширение .vue и импорты Скопировать ссылку
Для Webpack было совершенно не обязательно указывать расширение .vue для файлов компонентов, но не для Vite. Нужно заменить:
- import DotsLoader from '@/components/DotsLoader' + import DotsLoader from '@/components/DotsLoader.vue' Не по теме, но из моего опыта: использовать импорты с полными путями — лучшая практика.
Очистка маршрутов для ленивой загрузки Скопировать ссылку
Вы со спокойной душой можете удалить комментарии webpackChunkName для генерации чанков для определенных маршрутов:
< path: '/links', name: 'linksPage', component: () =>import(/* webpackChunkName: "links" */ './views/LinksPage.vue'), >, Используя Vite можно писать так:
< path: '/links', name: 'linksPage', component: () =>import('./views/LinksPage.vue'), >, Я в этом не эксперт, но если вы действительно хотите изменить имя для вашего чанка, вероятно, вы можете это сделать принудительно с помощью Rollup output.entryFileNames .
Также, можете посмотреть опции для сборщика Vite build.rollupOptions и перенести часть задач на него.
Переменные окружения Скопировать ссылку
Мы должны заменить все process.env , которые Vite не понимает. Для Vite нужно использовать import.meta.env .
Если ваш роутер использует встроенную переменную окружения BASE_URL , то ее имя надо будет заменить на import.meta.env.BASE_URL :
const router = new Router(< mode: 'history', - base: process.env.BASE_URL, + base: import.meta.env.BASE_URL, routes: [. firstLevelRoutes, . backOfficeRoutes] >)
Другой встроенной переменной окружения является import.meta.env.PROD . Давайте будем использовать её везде, где можем:
- if (process.env.NODE_ENV === 'production') < + if (import.meta.env.PROD) Убедитесь, что настройка NODE_ENV=production соответствует настройкам среды в файле .env или в переменных окружения сервера, на котором собирается ваше приложение во время релиза. Подробнее можно посмотреть в документации по переменным окружения и режимах работы Vite.
Что касается ваших собственных переменных окружения, которые вы использовали раньше с префиксом VUE_APP — вам нужно будет заменить его на VITE . Любая переменная окружения, которая будет начинаться с VITE_xxx , будет доступна во всём вашем коде.
Вот пример для моей переменной окружения BACKEND_URL :
export const backendInstance = axios.create(< - baseURL: `$/api`, + baseURL: `$/api`, timeout: 10000, >)
VITE_APP_BACKEND_URL=http://localhost:3001 Тесты Скопировать ссылку
Поскольку мы больше не можем использовать vue-cli-service test:unit , давайте настроим наши тесты.
Для начала надо обновить скрипт для тестов test :
- "test:unit": "vue-cli-service test:init", + "test": "jest", Затем пройдемся по шагам, описанным в документации.
Если вы использовали файл babel.config.js , то нужно будет сделать что-то вроде:
- presets: ['@vue/cli-plugin-babel/preset'], + presets: ['@babel/preset-env'], У меня были ошибки для выражения import.meta.env .
К сожалению, простых настроек для модульных тестов в Vite нет, но этот комментарий мне помог.
Мой файл babel.config.js теперь выглядит так:
module.exports = < presets: ['@babel/preset-env'], // Чтобы Jest не нервировали 'import.meta.xxx' plugins: [ function () < return < visitor: < MetaProperty(path) < path.replaceWithSourceString('process') >, >, > >, ], > Вы можете усилить сборку плагином babel-plugin-transform-import-meta для Babel, который будет исправлять автоматически ошибки в ваших тестах, связанные с import.meta .
Вы можете почитать и обсудить в отдельном ишью на GitHub совместную работу Vite и Jest.
Ошибка regeneratorRuntime Скопировать ссылку
49 | export const actions = < >50 | init: async (< commit >, routeContext) => < ReferenceError: **regeneratorRuntime** is not defined
Устанавливая regenerator-runtime и ссылаясь на него в моем setupTests.js , я обнаружил, что эту ошибку уже починили.
npm i regenerator-runtime -D module.exports = < moduleFileExtensions: [ 'js', 'json', // Говорит Jest обрабатывать файлы *.vue 'vue', ], transform: < // Обработай файл *.vue с помощью vue-jest '.*\\.(vue)$': 'vue-jest', // Обработай файлы *.js с помощью babel-jest '.*\\.(js)$': 'babel-jest', >, setupFiles: ['./setupTests'], moduleNameMapper: < '^@/(.*)$': '/src/$1', >, collectCoverage: false, > Первая строчка файла конфигурации setupTests.js будет такой:
import 'regenerator-runtime/runtime' Линтер Скопировать ссылку
Я заменил два скрипта для линтинга одним:
- "lint": "vue-cli-service lint src --no-fix", - "lint:fix": "vue-cli-service lint src", + "lint": "eslint src", + "lint:fix": "eslint src --fix", Развертывание приложений Скопировать ссылку
В этом примере мое приложение крутится в облаке S3 и CloudFront. У меня два окружения для режима продакшена: preprod и prod . Поэтому у меня и два файла для настройки окружения .env :
Когда мы собираем наше приложение с помощью Rollup, мы указываем режим, и Vite меняет переменные окружения на те, которые соответствуют этому режиму.
Это очень похоже на Vue CLI, поэтому обновление скриптов в package.json очень простое:
- "build-preprod": "vue-cli-service build --mode preprod", - "build-prod": "vue-cli-service build --mode prod", + "build-preprod": "vite build --mode preprod", + "build-prod": "vite build --mode prod", Если вам нужно больше подробностей, они хорошо описаны в документации.
Небольшая ремарка: мне пришлось также поменять максимальный размер для чанка в vite.config.js :
import < defineConfig >from 'vite' import < createVuePlugin >from 'vite-plugin-vue2' export default defineConfig(< build: < // По умолчанию 500 chunkSizeWarningLimit: 700, >, >) Так делать нехорошо, я знаю.
Визуализация сборки Скопировать ссылку
Это последнее упоминание Vue CLI, которое было в моей кодовой базе:
"build:report": "vue-cli-service build --report", Давайте поищем что-то похожее в мире Rollup. Использование плагина rollup-plugin-visualizer оказалось достаточно хорошим решением для меня.
Я импортировал этот плагин и прописал его в vite.config.js :
import < defineConfig >from 'vite' import < createVuePlugin >from 'vite-plugin-vue2' import visualizer from 'rollup-plugin-visualizer' export default defineConfig(< plugins: [ createVuePlugin(), visualizer(), ], >) Результат теста в сгенерированном файле stats.html :
Несколько метрик Скопировать ссылку
Время старта Скопировать ссылку
- Загрузка Vite: около 4 секунд — предполагается, что это время не сильно изменится, даже если проект будет расти ��
- Загрузка с Vue CLI и Webpack: около 30 секунд — это время постоянно растет при увеличении количества файлов в проекте ��
Горячая перезагрузка Скопировать ссылку
Vite:
- Простые изменения (HTML-файлы, CSS-классы): очень быстро! ��
- Серьёзные изменения (переименование функций JS, добавление компонентов): не уверен, иногда мне было удобнее перезагрузить страницу самому.
Vue CLI и Webpack:
- Простые изменения: около 4 секунд ��
- Серьезные изменения: никогда не жду, сам перезагружаю страницу.
Первая загрузка страницы Скопировать ссылку
Мы запрашиваем страницу в первый раз после запуска Vite. У меня было веб-приложение с большим количеством компонентов. Давайте взглянем на вкладку Network в Chrome DevTools:
- Vite: загрузка около 1430 JS-файлов длится примерно 11 секунд ��
- Vue CLI и Webpack: загрузка около 23 JS-файлов длится примерно 6 секунд ��
Посмотрим, как будет развиваться проект. Пока у меня не было достаточного опыта использования Vite, но начало многообещающее. Надо будет ещё оценить все возможности этого сборщика. Например, заявлено, что в Vite круто реализована ленивая загрузка компонентов!
Заключение Скопировать ссылку
Поработав некоторое время с Vite, могу сказать, что это был очень приятный опыт �� И теперь все тяжелее и тяжелее работать с Webpack на других проектах!
Vue.js
Vue.js is a framework for developing user interfaces and advanced single-page applications. WebStorm provides support for the Vue.js building blocks of HTML, CSS, and JavaScript with Vue.js-aware code completion for components, including components defined in separate files, attributes, properties, methods, slot names, and more.
With the built-in debugger, you can debug your Vue.js code right in WebStorm, which can automatically generate the necessary run/debug configurations you need: an npm configuration that launches the development server and starts your application in the development mode and a JavaScript Debug configuration that launches a debugging session.
Before you start
- Make sure you have Node.js on your computer.
- Make sure a local Node.js interpreter is configured in your project: open the Settings dialog ( Control+Alt+S ) and go to Languages & Frameworks | Node.js . The Node interpreter field shows the default project Node.js interpreter. Learn more from Configuring a local Node.js interpreter.
- Make sure the Vue.js and JavaScript Debugger required plugins are enabled on the Settings | Plugins page, tab Installed . For more information, refer to Managing plugins.
Create a new Vue.js application
The recommended way to create a new Vue.js app is the create-vue official Vue project scaffolding tool, which WebStorm downloads and runs for you using npx.
You can still use Vue CLI, if you choose this option WebStorm also downloads and runs it with npx .
Of course, you can download any of these tools yourself or create an empty WebStorm project as described in Creating projects and bootstrap it with Vue.js and other tools, such as Vite, babel, webpack, ESLint, etc.
- Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.
- In the left-hand pane, choose Vue.js .
- In the right-hand pane:
- Specify The path to the folder where the project-related files will be stored.
- In the Node Interpreter field, specify the Node.js interpreter to use. Select a configured interpreter from the list or choose Add to configure a new one.
- From the Vue CLI list, select npx create-vue (recommended) or npx --package @vue/cli vue . Alternatively, for npm version 5.1 and earlier, install the package yourself by running npm install --g create-vue or npm install --g @vue/cli in your command-line shell or in the Terminal Alt+F12 . When creating an application, select the folder where the package is stored.
- To bootstrap your application with babel and ESLint, select the Use the default project setup checkbox.
Create an empty WebStorm project
- Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.
- In the left-hand pane, choose Empty Project .
- Specify The path to the folder where the project-related files will be stored.
- When you click Create , WebStorm creates and opens an empty project.
Install Vue.js in an empty project
- Open the empty project where you will use Vue.js .
- In the embedded Terminal ( Alt+F12 ) , type: npm install vue
Start with an existing Vue.js application
To continue developing an existing Vue.js application, open it in WebStorm and download the required dependencies.
Open the application sources that are already on your machine
- Click Open on the Welcome screen or select File | Open from the main menu. In the dialog that opens, select the folder where your sources are stored.
Check out the application sources from your version control
- Click Get from VCS on the Welcome screen. Alternatively, select File | New | Project from Version Control or Git | Clone… from the main menu. Instead of Git in the main menu, you may see any other Version Control System that is associated with your project. For example, Mercurial or Perforce .
- In the dialog that opens, select your version control system from the list and specify the repository to check out the application sources from. For more information, refer to Check out a project (clone).
Download the dependencies
- Click Run 'npm install' or Run 'yarn install' in the popup: You can use npm, Yarn 1, or Yarn 2, refer to npm and Yarn for details.
- Select Run 'npm install' or Run 'yarn install' from the context menu of package.json in the editor or in the Project tool window.
Project security
When you open a project that was created outside WebStorm and was imported into it, WebStorm displays a dialog where you can decide how to handle this project with unfamiliar source code.
Select one of the following options:
- Preview in Safe Mode : in this case, WebStorm opens the project in a preview mode. It means that you can browse the project's sources but you cannot run tasks and script or run/debug your project. WebStorm displays a notification on top of the editor area, and you can click the Trust project… link and load your project at any time.
- Trust Project : in this case, WebStorm opens and loads a project. That means the project is initialized, project's plugins are resolved, dependencies are added, and all WebStorm features are available.
- Don't Open : in this case, WebStorm doesn't open the project.
Projects created from the Welcome screen or via File | New | Project as described in Creating projects are automatically considered trusted.
Write and edit your code
In .vue files, WebStorm recognizes script , style , and template blocks. You can use JavaScript and TypeScript inside script tags, Style Sheet languages inside style tags, and HTML and Pug inside template tags.
When you use TypeScript inside a script tag, WebStorm invokes the TypeScript Language Service for type checking and shows detected errors in the Errors and Compile errors tabs of the TypeScript tool window. For more information, refer to Verifying TypeScript. Alternatively, you can use TsLint as described in Linting TypeScript in Vue.js components using TSLint
Vue.js components
WebStorm recognizes the .vue file type and provides a dedicated .vue file template for Vue.js components.
Create a Vue.js component
- In the Project tool window, select the parent folder for the new component, and then choose Vue Component from the list.
You can also extract a new Vue.js component from an existing one without any copying and pasting but using a dedicated intention action or refactoring. All the data and methods used in the newly extracted template stay in the parent component. WebStorm passes them to the new component with properties and copies the related styles.
Extract components
- Select the template fragment to extract and invoke component extraction:
- To use the intention action, press Alt+Enter , and then choose Extract Vue Component from the list.
- To use the refactoring, choose Refactor | Extract | Extract Vue Component from the main menu or from the context menu of the selection.
- Type the name of the new component. If this name is already used or invalid, WebStorm shows a warning. Otherwise, a new single-file component is created and imported into the parent component.
The Extract Vue Component refactoring works only in-place, so make sure the In the editor refactoring option is selected on the Editor | Code Editing page of the IDE settings Control+Alt+S .
Code completion
Complete code inside script, style, and template blocks
Completion is also available if a template is defined in a separate HTML file and then linked to the template property.
![](/logo.png/></p>
<p>WebStorm resolves all references to assets stored in the static folder in the format.</p>
<p> <img loading="lazy" decoding="async" src="https://resources.jetbrains.com/help/img/idea/2023.2/ws_nuxt-resolution-for-static_dark.png" alt="Resolution for images from static folder" width="706" height="350" /></p>
<h5>Edit nuxt.config.js</h5>
<p>WebStorm provides proper completion suggestions for the nuxt.config.js configuration file.</p><div class=){kind=logo}
