在服务器端框架应用程序中嵌入 vue 应用程序。 Vue 公共路径失败答案

【问题标题】：Embedding vue app within server-side framework app. Vue Public Path fails在服务器端框架应用程序中嵌入 vue 应用程序。 Vue 公共路径失败
【发布时间】：2020-02-16 12:22:12
【问题描述】：

TLDR - 在 Phoenix 应用中嵌入 vue 应用。使用 vue cli 构建 vue 应用程序，并确保文件进入它们应该在 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/'

【问题讨论】：

标签： javascript vue.js vue-cli

【解决方案1】：

找到了一个更好的解决方案 - 禁用 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 模板而烦恼，因为您只需像往常一样构建服务器端模板。这适用于任何集成 - 不仅仅是 Phoenix。

【讨论】：