我面临的问题是,一旦我输入了import个vue,vue的包装器元素(在我的例子#app中)将被替换为以下注释

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

控制台中没有错误,webpack编译很好,但是我确实从vue的mounted方法中获得了控制台日志(log).

我的索引.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>

网页包.配置.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')
    }
})

推荐答案

您正在运行一个只运行时的生成,而不使用模板编译器.

查看https://vuejs.org/v2/guide/installation.html#Webpack

你需要为"vue"创建一个别名,这样网页包就包含了正确的vue/dist/*.来自 node 的js_模块/:

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

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

Vue.js相关问答推荐

如何将计算(computed)属性动态添加到Vue组件中?

从组件中检索 Shopware CMS 编辑器中的自定义实体数据

是否可以将 nuxt3 与类星体框架一起使用

VeeValidate 4 字段验证状态

Vue:将点击事件绑定到动态插入的内容

如果找不到路由,Vue.js如何重定向到公共路由

有没有办法初始化一个保留初始 HTML 的 Vue 对象

webpack vue-loader 配置

VueJS 将 HTML 打印到页面

Vue.js 过滤数组

怎样1秒后自动隐藏VueJS中的元素

如何克隆props对象并使其无react

在 v-for 循环中使用 v-model

我可以修改 Vue.js VNodes 吗?

Vue Cli 3 不允许我在 Webpack 中处理 SVG

Vue CLI - 将构建输出组合到单个 html 文件

如何避免在 Vue 中一直写 this.$store.state.donkey 的需要?

如何从 vue-apollo 中访问 this.$route?

来自 Vue.js 的 ESLint 插件的消息中的LHS是什么意思?

带有 Firebase 云消息传递的 Vue pwa 无法正常工作