Встраивание приложения vue в приложение на стороне сервера. Vue Public Path не работает - PullRequest
Новая
       49

Встраивание приложения vue в приложение на стороне сервера. Vue Public Path не работает

0 голосов
/ 20 октября 2019

TLDR - встраивание приложения vue в приложение Phoenix. Создайте приложение vue с помощью vue cli и убедитесь, что файлы попадают в каталоги, которые они должны содержать в проекте Pheonix. После сборки приложение не работает, поскольку путь к файлу ресурса не совпадает с publicPath.

. Я создаю мое приложение vue в ../../lib/exampleapp_web/templates/page. Мне нужно использовать собственный html-шаблон для удаления тегов vues <html>, <head> и <body>, поскольку Pheonix отображает этот шаблон страницы в существующем шаблоне макета.

мой vue.config.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/'

1 Ответ

0 голосов
/ 21 октября 2019

Нашли лучшее решение - отключите генерацию HTML ... это статический файл, поэтому сделайте его шаблоном в бэкэнд-приложении. Создайте JS и CSS - укажите имена файлов ресурсов и выведите их в выбранную вами папку. Большая часть этого конфига была найдена в сообщении в блоге - однако я не могу вспомнить, какой из них ...

vue.config.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-шаблонов, так как вы просто создаете свой серверный шаблон, как обычно. Это относится к любой интеграции - не только Феникс.

...