Javascript 带有Rollup.js的Vue.js呈现html注释，而不是Vue html_Javascript_Vue.js_Rollupjs

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

javascript vue.js

Javascript 带有Rollup.js的Vue.js呈现html注释，而不是Vue html,javascript,vue.js,rollupjs,Javascript,Vue.js,Rollupjs,最近开始使用Vue.js，我很难在本地开发应用程序中获得一个简单的插值渲染输出出于某种原因，Vue实例呈现了createElement html <body> <ul id="example-1"> <li v-for="item in items"> << item.message >> </li> </ul> <script src="/scripts/

最近开始使用Vue.js，我很难在本地开发应用程序中获得一个简单的插值渲染

输出

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

html

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

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

package.json（减去额外费用）

我尝试过的

设置该示例，并在本地使用IIS和带有内联javascript的静态html托管它，效果很好

```
nunjucks render
```
最初正在解析
```
{{property}
```
并将其完全擦除。为了解决这个问题，我更改了nunjucks的变量语法：
默认情况下，Vue的
```
import
```
将只加载运行时模块，因为它在Vue/package.json的
```
modules
```
部分声明，并且根据安装文档：

从“Vue/dist/Vue.esm.js”导入Vue

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

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

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

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;

{
  "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"
  ]
}

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