Vue.js 与 Rollup.js 呈现 html 评论而不是 Vue html

Question

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

输出

出于某种原因，Vue 实例呈现了 createElement

<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(..) 中的 "step into next functional call" 时：

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>

gulp 文件

HTML 渲染输出由任务 nunjucksHtml 完成。
JS 被任务捆绑 scripts。
我没有发现 browsersync 有什么问题，但这是具有静态 html 的本地 IIS 站点与有效的 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 和静态 html 使用内联 javascript 托管它，效果很好。

Answer 1

这是一个分为两部分的问题：

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

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

import 默认会加载 runtime-only 模块，因为它声明在 vue/package.json 的 modules 部分，并且根据安装文档：

If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build

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

Answer 2

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

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

Vue.js 与 Rollup.js 呈现 html 评论而不是 Vue html

Vue.js with Rollup.js renders html comment instead of Vue html

javascript

vue.js

rollupjs