Встраивание приложения vue в серверное приложение framework. Общественный путь вю не

Встраивание приложения vue в серверное приложение framework. Общественный путь вю не

20.10.2019 02:36:47 Просмотров 67 Источник

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

Rob

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.

Помочь в развитии проекта:
Закрыть X