Встраивание приложения vue в серверное приложение framework. Общественный путь вю не
TLDR-встраивание приложения vue в приложение Phoenix. Создание приложения vue с помощью vue cli и убедитесь, что файлы идут в каталоги, которые они должны быть в проекте Pheonix. При сборке приложение не работает, так как путь к файлу активов не соответствует publicPath.
Я создаю свое приложение vue ../../lib/exampleapp_web/templates/page. Мне нужно, чтобы использовать пользовательский HTML-шаблон для удаления видов <html>,<head>и <body> теги, как Феникс представляет этот шаблон в существующий шаблон макет.
мой Вью.конфиг.js выглядит так
vue.config.js
module.exports = {
outputDir: '../../lib/exampleapp_web/templates/page',
assetsDir: '../../../../assets/static',
indexPath: 'index.html.eex',
publicPath: './', // should make asset routes relative to route
chainWebpack: config => {
config.plugin('html').tap(args => {
return [{
template: "./public/index.html", // custom vue html template
minify: false, // so I can read it
inject: false // so html, head, body etc isn't injected
}]
})
}
}
При построении пути к активу отображаются неверно (отображается assetDir, а не путь, указанный в publicPath):
<script src="../../../../assets/static/js/chunk-vendors.74d8847d.js"></script>
Когда мне нужно: <script src="./js/chunk-vendors.74d8847d.js"></script>
Поэтому, чтобы исправить это, я делаю замену строки в своем шаблоне Vue html:
public/index.html
<!-- https://github.com/jaketrent/html-webpack-template/blob/86f285d5c790a6c15263f5cc50fd666d51f974fd/index.html -->
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[css].replace('./../../../assets/static/','/') %>" rel="stylesheet">
<% } %>
<div id="app"></div>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry.replace('./../../../assets/static/','/') %>"></script>
<% } %>
Это оказывает:
<link href="./css/chunk-vendors.257c6d34.css" rel="stylesheet">
<link href="./css/app.d5864d1f.css" rel="stylesheet">
<div id="app"></div>
<script src="./js/chunk-vendors.74d8847d.js"></script>
<script src="./js/app.b25a73d8.js"></script>
Эта работа.... он просто чувствует себя неуклюжим. Необходимость редактировать шаблон каждый раз, чтобы заменить пути не является действительно жизнеспособным. Есть ли лучший способ?
Я думал, что вариант publicPath сделает это https://cli.vuejs.org/config/#publicpath -это просто не работает для меня.
By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'
Ответы - Встраивание приложения vue в серверное приложение framework. Общественный путь вю не / Embedding vue app within server-side framework app. Vue Public Path fails
21.10.2019 12:52:50
Нашел лучшее решение-отключить генерацию HTML... это статический файл, поэтому сделайте его шаблонным файлом в бэкэнд-приложении. Создайте JS и CSS-укажите имена файлов активов и выведите их в выбранную папку. Большая часть этой конфигурации была найдена в блоге - однако я не могу вспомнить, какой именно...
Ву.конфиг.JS
const assetsDir = './../../../assets/static'
// This config disables HTML, and builds static assets
// static assets are stuck in assetsDir.
// assetsDir does NOT filter down - hence we have to add it to each filename
// We give each file a name - this breaks cachebusting (if you use it)
// We create a static html file - which loads our paths
module.exports = {
assetsDir,
configureWebpack: {
output: {
filename: assetsDir + "/js/my-file.js",
chunkFilename: assetsDir + "/js/my-file-chunk.js"
}
},
chainWebpack: config => {
if (config.plugins.has("extract-css")) {
const extractCSSPlugin = config.plugin("extract-css");
extractCSSPlugin &&
extractCSSPlugin.tap(() => [
{
filename: assetsDir + "/css/my-file.css",
chunkFilename: assetsDir + "/css/my-file-chunk.css"
}
]);
}
config.plugins
.delete("html")
.delete("prefetch")
.delete("preload");
}
}
Преимущество этого - при сборке ваши файлы сбрасываются в правильный каталог. Вам не нужно беспокоиться о создании шаблонов html, так как вы просто создаете свой шаблон на стороне сервера, как обычно. Это касается любой интеграции-не только Phoenix.