Vue 用 webpack 编译时用注释替换 HTML [英] Vue replaces HTML with comment when compiling with webpack

查看：47 发布时间：2021/12/8 22:03:55 javascript webpack vue.js

本文介绍了Vue 用 webpack 编译时用注释替换 HTML的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我面临的问题是，一旦我 import vue，vue 的包装元素(在我的例子中是 #app)将被以下注释替换

控制台中没有错误并且 webpack 编译得很好，但是我确实从 vue 的 mounted 方法中获取了控制台日志.

我的 index.html

<html lang="zh-cn"><头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文档</title><身体><div id="应用程序"><h1>一些内容</h1>{{测试}}

<script src="dist/bundle.js"></script>

webpack.config.js

const path = require('path');模块.出口 = {条目:'./src/app.js',输出: {文件名:'bundle.js',路径:path.resolve(__dirname, 'dist')}}

src/app.js

从'vue'导入Vueconst app = new Vue({el: "#app",数据: {测试:asdf"},安装(){console.log('挂载')}})

解决方案

您正在运行没有模板编译器的仅运行时构建.

查看https://vuejs.org/v2/guide/installation.html#网络包

您需要为 'vue' 创建一个别名，以便 webpack 从您的 node_modules/中包含正确的 vue/dist/*.js:

module.exports = {//...解决: {别名:{'vue$': 'vue/dist/vue.esm.js'}}}

另见 https://forum.vuejs.org/t/what-is-the-compiler-included-build/13239

I am facing the problem that once I import vue, the wrapper element for vue (in my case #app) will be replaced with the following comment

<!--function (e,n,r,o){return sn(t,e,n,r,o,!0)}-->

There is no error in the console and webpack compiles fine, I do however get the console log from vue's mounted method.

My index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>some content</h1>
        {{test}}
    </div>
    <script src="dist/bundle.js"></script>
</body>
</html>

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

src/app.js

import Vue from 'vue'

const app = new Vue({
    el: "#app",
    data: {
        test: "asdf"
    },
    mounted() {
        console.log('mounted')
    }
})

解决方案

You are running a runtime-only build without the template compiler.

Check out https://vuejs.org/v2/guide/installation.html#Webpack

You need to create an alias for 'vue', so webpack includes the correct vue/dist/*.js from your node_modules/:

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

这篇关于Vue 用 webpack 编译时用注释替换 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

Vue 用 webpack 编译时用注释替换 HTML [英] Vue replaces HTML with comment when compiling with webpack

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

Vue 用 webpack 编译时用注释替换 HTML [英] Vue replaces HTML with comment when compiling with webpack

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭