带有 Rollup.js 的 Vue.js 呈现 html 注释而不是 Vue html

Question

最近开始使用 Vue.js，并且很难在我的本地开发应用程序中进行简单的插值渲染。

输出

出于某种原因，Vue 实例呈现了createElement的 html 注释

<body>
  <script id="__bs_script__">
    //<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
    //]]>
  </script>
  <script async="" src="/browser-sync/browser-sync-client.js?v=2.26.7"></script>

  <!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

  <script src="/scripts/main.js"></script>
</body>

当我从new Vue(..)使用“进入下一个功能调用”时：

main.js - 我注意到 nunjucks 在我的 gulp 构建中使用了{{ }}小胡子标记，所以我现在确保在 Vue 实例中将分隔符更改为<< >> 。 确认它们确实显示在提供应用程序的 .tmp 文件夹中。

import Vue from 'vue'
var example1 = new Vue({
    delimiters: ['<<', '>>'],
    el: '#example-1',
    data: {
      items: [{
          message: 'Foo'
        },
        {
          message: 'Bar'
        }
      ]
    }
  });

html

<body>
  <ul id="example-1">
    <li v-for="item in items">
      << item.message >>
    </li>
  </ul>

  <script src="/scripts/main.js"></script>
</body>

吞咽文件

HTML 呈现的输出由任务nunjucksHtml完成。
JS 由任务scripts捆绑。
我认为 browsersync 没有任何问题，但这是本地 IIS 站点与静态 html 和 js 有效的唯一区别之一。

const { src, dest, watch, series, parallel } = require("gulp");
const gulpLoadPlugins = require("gulp-load-plugins");
const browserSync = require("browser-sync");
const del = require("del");
const { argv } = require("yargs");

const $ = gulpLoadPlugins();
const server = browserSync.create();

const port = argv.port || 9000;
const isProd = process.env.NODE_ENV === "production";
const isDev = !isProd;

const babelRollup = require("rollup-plugin-babel");
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
const vue = require('rollup-plugin-vue');
const rollupReplace = require('rollup-plugin-replace');

// (other bundles not shown)
const jsBundles = [{
    src: 'app/scripts/main.js',
    dest: '.tmp/scripts',
    prodDest: 'dist/scripts'
  }
];

function scripts(done) {
  jsBundles.forEach((obj) => {
    return src(obj.src)
      .pipe($.plumber())
      .pipe($.if(!isProd, $.sourcemaps.init()))
      .pipe(
        $.betterRollup({
          plugins: [
            vue({ css: false }),
            rollupReplace({
              'process.env.NODE_ENV': JSON.stringify('production')
            }),
            resolve({ browser: true }),
            babelRollup({
              exclude: 'node_modules/**'
            }),
            commonjs()
          ]
        }, 
        {
          format: "umd",
        })
      )
      .pipe($.if(!isProd, $.sourcemaps.write(".")))
      .pipe($.if(!isProd, dest(obj.dest), dest(obj.prodDest)))
      .pipe($.if(!isProd, server.reload({
        stream: true
      })));
  });

  done();
}

function nunjucksHtml() {
  return src("app/**/[^_]*.html")
    .pipe(
      $.nunjucksRender({
        path: ["app/"]
      })
    )
    .pipe(dest(".tmp"));
}

function clean() {
  return del([".tmp", "dist"]);
}

function startAppServer() {
  server.init({
    notify: false,
    port,
    server: {
      baseDir: [".tmp", "app"],
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });

  watch([".tmp/*.html", "app/images/**/*"]).on(
    "change",
    server.reload
  );

  watch("app/**/*.html", nunjucksHtml);
  watch("app/scripts/**/*.js", scripts);
}

let serve = series(
    clean,
    parallel(nunjucksHtml, scripts),
    startAppServer
);

exports.serve = serve;

package.json （减去额外内容）

{
  "private": true,
  "engines": {
    "node": ">=4"
  },
  "dependencies": {
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "browser-sync": "^2.2.1",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-better-rollup": "^4.0.1",
    "gulp-nunjucks-render": "^2.2.3",
    "rollup": "^1.16.7",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^10.0.1",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-vue": "^5.0.1",
    "rollup-stream": "^1.24.1",
    "vue-template-compiler": "^2.6.10",
    "yargs": "12.0.5"
  },
  "scripts": {
    "start": "gulp serve"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "Firefox ESR"
  ]
}

我试过的

设置示例codepen并使用 IIS 在本地托管它，使用内联 javascript 的静态 html 运行良好。

Answer 1

这是一个两部分的问题：

nunjucks render最初是解析{{ property }}并将其完全擦除的。 为了解决这个问题，我更改了nunjucks的变量语法：

    .pipe(
      $.nunjucksRender({
        envOptions: {
          tags: {
            variableStart: '{#',
            variableEnd: '#}'
          }
        }
      })
    )

默认情况下， import Vue将加载仅运行时模块，因为它是在vue / package.json的modules部分中声明的，并根据安装文档进行了声明：

如果需要在客户端上编译模板（例如，将字符串传递给template选项，或使用其in-DOM HTML作为模板安装到元素），则需要编译器，从而需要完整的版本

因此，我的导入最终看起来像： import Vue from 'vue/dist/vue.esm.js'

Answer 2

您不需要更改所有标签，只需使用 {% raw %} 标签，例如：

{% raw %}
  <div>
   <div>{{value}}</div>
  </div>
{% endraw %}

带有 Rollup.js 的 Vue.js 呈现 html 注释而不是 Vue html

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-09-13 21:24:52

解决方案2
0 2022-01-10 17:35:37

带有 Rollup.js 的 Vue.js 呈现 html 注释而不是 Vue html

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-09-13 21:24:52

解决方案2 0 2022-01-10 17:35:37

解决方案1
0 已采纳 2019-09-13 21:24:52

解决方案2
0 2022-01-10 17:35:37