Вдохновленный Кристи Жора и этой статьей: https://medium.com/corebuild-software/vue-js-and-net-mvc-b5cede22862, я продолжил и попытался добавить то же самое. функциональные возможности нашего стандартного решения для будущих проектов.
Между тем, когда статья была опубликована, и когда я начал свою реализацию, веб-пакет изменился с версии 3 на версию 4, а Vue представил компилятор vue-template-compiler (в дополнение к vue-loader). К счастью, большая часть работы осталась прежней… Написание SFC, а также добавление их на вашу страницу с помощью созданных пользовательских тегов. Самая большая проблема заключалась в том, чтобы изменить конфигурацию веб-пакета (и сделать что-то еще в моем случае), и именно об этом я собираюсь поговорить.
Когда веб-пакет перешел с версии 3 на версию 4, многие параметры конфигурации были упрощены (из коробки, например, производственный режим, который минимизирует ваш код), поэтому вы увидите «более или менее» уменьшенную версию файла конфигурации как используется в упомянутой статье.
const path = require("path");
const fs = require("fs");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const appBasePath = "./js/components/";
const jsEntries = {};
fs.readdirSync(appBasePath).forEach(name => {
var indexFile = `${appBasePath}${name}/index.js`;
if (fs.existsSync(indexFile)) {
jsEntries[name] = indexFile;
}
});
module.exports = {
entry: jsEntries,
output: {
path: path.resolve(__dirname, "../dist/js/components"),
filename: "[name].js"
},
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js"
}
},
module: {
rules: [
{
test: /\.vue$/,
use: {
loader: "vue-loader",
options: {
js: "babel-loader"
}
}
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
},
{
test: /\.(css|scss)$/,
use: ["vue-style-loader", "style-loader", "css-loader", "sass-loader"]
}
]
},
plugins: [new VueLoaderPlugin()],
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
}
}
}
},
devtool: "source-map"
};
Как видите, все начинается с того же цикла создания записей (подробную информацию см. в упомянутой статье). Для вывода я выбрал подпапку «components» в папке «dist», так как она используется только для компиляции компонентов Vue. После этого не забудьте (!) параметр «разрешить», поскольку, поскольку я думал, что это не так, мне потребовалось полдня, чтобы понять, почему мои скомпилированные файлы .js не отображали мои компоненты. Следующие настройки «модуля» более или менее одинаковы, за исключением некоторых опций здесь и там (добавление дополнительного пакета или упрощенная настройка Babel 7). «Плагины» — это новая часть, появившаяся после одного из последних обновлений vue-loader. И, возможно, часть, которой я больше всего доволен, — это оптимизация (см. Отдельный раздел ниже).
Оптимизация
При создании файла .js все включенные модули SFC и импортированные узлы объединяются и минимизируются в один большой файл .js. Поскольку мне не нужны все компоненты на каждой странице, я создаю файл .js для каждой страницы, используя логику jsEntries. Недостатком этого является то, что каждый файл .js будет связан со средой выполнения Vue, что означает дополнительные +/- 100 КБ на файл. К счастью, вы можете провести некоторую оптимизацию, создав дополнительный файл (в моем случае «vendors.js»), содержащий все распространенные модули узлов, которые используются в компонентах Vue, для одного (кэшируемого) файла. Затем этот файл можно добавить на страницу _Layout, а другие файлы .js можно добавить на каждую страницу, в результате чего ваши пользователи должны будут загрузить гораздо меньше КБ, а также ускорить загрузку компонентов.
Очистка кеша
Когда вы добавляете файлы JS на свои веб-страницы, они будут кэшироваться браузером и не обновляться при появлении новой версии (поскольку она кэшируется по имени, которое не изменилось). Поскольку вы не используете встроенный модуль связывания .NET MVC, это также означает, что метод автоматической очистки кеша не применяется (изменение/объединение ваших JS-файлов с хэшем, который меняется при изменении JS-файлов). Для этого вам придется реализовать свой собственный стиль очистки кеша, а дополнительную информацию можно найти здесь: https://madskristensen.net/blog/cache-busting-in-aspnet/
Я предпочитаю решение с версией сборки (https://madskristensen.net/blog/cache-busting-in-aspnet/#546c01e8-b3c7-4b63-a863-a47de3dc1507), даже если это означает, что строка запроса добавляется как есть не лучшая практика для Google Page Speed. В конце концов, стандартный пакет .NET MVC делает то же самое…
Процесс сборки
Если вы хотите использовать это в конвейере CI/CD, вы можете интегрировать это следующим образом. Для этого я использую Azure DevOps, а в конвейере сборки вы можете добавить дополнительную задачу для выполнения команды NPM. Добавьте это и установите команду «npm run build:components». Это выполнит компиляцию веб-пакета и выведет полученные файлы JS в папку /dist. Затем на эти файлы JS ссылаются из HTML. Здесь не используется стандартное связывание (или минимизация) ASP.NET MVC, поскольку все это делается через веб-пакет.
И это все, если вы хотите добавить Vue SFC в свои существующие проекты ASP.NET MVC. Раньше у меня был пост в блоге о компонентах Vue (не SFC), но меня беспокоило, что я не могу использовать стилизацию SFC, поэтому я продолжил поиск и, наконец, нашел решение, которым я доволен.
Для тех, кто заинтересован, я добавил необходимые файлы в репозиторий github, чтобы вы могли просто скопировать и вставить материал оттуда: https://github.com/KevinCocquyt39/mvc-vue-webpack4
Удачного кодирования!
