文章/答案/技术大牛

发布

社区首页 >问答首页 >Vue.js与Rollup.js一起呈现html注释，而不是Vue html

问Vue.js与Rollup.js一起呈现html注释，而不是Vue html
EN

Stack Overflow用户

提问于 2019-09-13 17:35:04

回答 2查看 621关注 0票数 0

最近开始与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>

gulp文件

HTML呈现的输出是由任务nunjucksHtml完成的。
JS由任务scripts捆绑。
我不认为浏览器同步有什么问题，但这是本地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"
  ]
}

我试过什么

设置示例码页并在本地托管IIS和带有内联javascript的静态html，效果很好。

javascript

vue.js

rollupjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-09-13 21:24:52

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

nunjucks render最初是解决{{ property }}并彻底删除它的。为了解决这个问题，我更改了nunjucks的变量语法：

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

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

如果您需要在客户端上编译模板(例如将字符串传递给template选项，或者使用其in-DOM HTML作为模板挂载到元素中)，则需要编译器，因此需要完整的构建。

因此，我的导入结果如下：import Vue from 'vue/dist/vue.esm.js'

票数 0

Stack Overflow用户

发布于 2022-01-10 17:35:37

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57928093

复制

相似问题

问Vue.js与Rollup.js一起呈现html注释，而不是Vue html
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue.js与Rollup.js一起呈现html注释，而不是Vue htmlEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue.js与Rollup.js一起呈现html注释，而不是Vue html
EN