мы знаемvueможно быстро развитьwebПриложение одностраничное, а официальный предоставляет нам собственный каркас приложенияvue-cli, нам нужно только скачать скаффолдинг и запустить его после установки зависимостейvueПрототип приложения. Это приносит пользуwebpackОтслеживание зависимостей различных суффиксов ресурсовloaderи связанные с нимиwebpackСила плагинов.
Однако иногда у нас есть требования к разработке для нескольких страниц.В этом случае мы можем создать соответствующие несколько приложений для нескольких страниц, например, черезvue-cliСоздавайте несколько каталогов приложений, но, с одной стороны, будет много повторяющегося кода построения и шаблонного кода, а с другой стороны, это также разрушит единство приложения, которое непросто поддерживать. мы можемvue-cliНа основе изменения конфигурации веб-пакета у скаффолдинга есть возможность создавать многостраничные приложения.
webpackкомпиляция в пакетеvueПри записи файлов наиболее важным является настройка входа и выхода, поэтому в основном мы будем изменять конфигурацию этих двух частей.
мой личный блог этоvueМногостраничное приложение, включая клиентское и фоновое управление. Ниже приведен пример, иллюстрирующий, как достичьvueДля многостраничных приложений весь процесс основан наvue-cli2из.
Входная конфигурация
Конфигурация входа относительно проста, открытаяwebpack.base.conf.js, просто нужно изменитьentryКонфигурацию можно изменить следующим образом:
entry: {
client: ["babel-polyfill", "./src/Client/main.js"],
manager: ["babel-polyfill", "./src/Manager/main.js"],
},
Увеличиватьbabel-polyfillВ основном совместим с браузерами более ранних версий, потому что Babel по умолчанию конвертирует только новыеJavaScriptсинтаксис(syntax) без преобразования нового API, напримерIterator,Generator,Set,Maps,Proxy,Reflect,Symbol,Promiseи другие глобальные объекты, а также некоторые методы, определенные для глобального объекта (например,Object.assign) не будет перекодирован.
выходная конфигурация
Конфигурация выходных данных Чтобы настроить выходные данные среды разработки и рабочей среды отдельно, давайте сначала настроим среду разработки. Открытьwebpack.dev.conf.js,существуетpluginДобавьте следующую конфигурацию в элемент конфигурации и удалите исходную.HtmlWebpackPluginконфигурация.
new HtmlWebpackPlugin({
filename: 'client.html',
template: './tpl/index.html',
inject: true,
chunks: ['client'],
}),
new HtmlWebpackPlugin({
filename: 'manager.html',
template: './tpl/index.html',
inject: true,
chunks: ['manager'],
}),
Как видите, здесь мы используемHtmlWebpackPluginПлагин настроен с двумя копиямиhtmlвыход,flienameимя файла скомпилированного вывода,templateдаhtmlШаблон, разные страницы могут использовать один и тот же шаблон или разные шаблоны.
На самом деле ресурсы страницы, к которым мы обращаемся в среде разработки,webpackуправляемый в памяти,webpack-dev-serverв качестве местной службы в соответствии сurlВозвращает ресурсы памяти браузеру для отображения страницы. Но как пройти по многостраничной ситуацииurlВернуться на соответствующую страницу, ответ является конфигурациейdevServerвнизhistoryApiFallback, элемент конфигурации будет переданconnect-history-api-fallbackЭто промежуточное ПО перенаправляет URL-адрес запроса запроса, чтобы избежать страницы 404 в среде разработки. Конфигурация выглядит следующим образом:
historyApiFallback: {
rewrites: [
{ from: 'index', to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
{ from: /\/admin/, to: path.posix.join(config.dev.assetsPublicPath, 'admin.html') },
],
},
На этом настройка среды разработки завершена.npm startПосле запуска проекта используйтеlocalhost:8080Вы можете увидеть страницу клиента, использоватьlocalhost:8080/adminВы можете увидеть страницу управления фоном.
Далее настройте производственную среду, сначала откройтеконфиг/index.js, существуетbuildДобавить цель к элементу конфигурацииhtmlвыходной путь и имя.
index: path.resolve(__dirname, '../server/public/index.html'),
admin: path.resolve(__dirname, '../server/public/admin.html'),
открыть следующийсборка/webpack.prod.conf.js,существуетpulginДобавьте следующую конфигурацию в:
new HtmlWebpackPlugin({
filename: config.build.index,
template: './tpl/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'client']
}),
new HtmlWebpackPlugin({
filename: config.build.admin,
template: './tpl/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'manager']
}),
Этому месту стоит уделить особое внимание, обязательно настроитьchunks, иначе все упакованные файлы будут импортированы одновременноadmin.htmlа такжеindex.html.
Таким образом, весьvueМногостраничная конфигурация завершена. Мы видим, что если каждый уровень страницы добавляется в проект, требуется несколько модификаций.webpackКонфигурация очень сложная. Для этого лучший способ основан наvue-cli2Слой инкапсуляции, это пример расширения, который я написалmultiPage-vue-cli.
режим истории
Иногда из-за обсессивно-компульсивного расстройства, невыносимогоhashв режимеurlНа нем есть символ #, или для нужд бизнеса,urlЗнак # не допускается. В настоящее время рассмотрите возможность использованияvue-routerизhistoryмодель,historyВнешняя конфигурация режима аналогична приведенной выше, но из-заhistoryв режимеurlПрыжок путиvue-routerиспользоватьh5изhistory APIДинамическое добавление и ручное обновление страницы приведет к ошибке 404, что маршрут не может быть найден, поэтому также необходимо настроить сервер для перенаправления маршрута на страницу первого уровня. Например, вы можетеnginxВыполните следующую настройку:
server {
listen 80;
location ^~ /api {
proxy_pass http://127.0.0.1:3000;
}
location /admin {
root /home/silentport.github.io/nginx/blog/;
index admin.html;
try_files $uri $uri/ /admin.html;
}
location / {
root /home/silentport.github.io/nginx/blog;
index index.html;
try_files $uri $uri/ /index.html;
}
}
в,
Первая конфигурация заключается в том, чтобы поместить все /apiЗапрос в начале перенаправляется на сервер узла для обработки;
Вторая конфигурация - поставить все /adminЗапрос в начале перенаправляет на admin.html;
Третья конфигурация заключается в том, чтобы поместить всеapiа такжеadminЗапросы, начинающиеся с перенаправления наindex.html,rootКонфигурация также может реагировать на статические файлы страницы;
Таким образом, не будет проблем с клиентским доступом, и обновление страницы не вызовет 404, все нормально, но все еще есть проблема с доступом на стороне управления, проблема заключается в том, что когдаadmin.htmlПри переключении маршрутизации в середине и ручном обновленииurlсерединаadminисчезнуть, так чтоnginxОн будет перенаправлен на страницу клиента. Для решения этой проблемы, но и вadminна страницеvue-routerдобавить одинbaseЭлемент конфигурации, когда маршрут прыгаетurlвсегда носите этоbase, настроенный следующим образом:
export default new Router({
mode: 'history',
base: '/admin',
routes: [
]
})
После всех вышеуказанных конфигурацийhistoryрежим можно использовать в обычном режиме.