Question

我试图用Vue包装我的旧网站，因此所有旧jQuery脚本仍应运行，并且所有旧HTML均应显示，但是出于某种原因el及其内部的所有内容都将被删除。

这是在使用脚本的Webpack版本时，例如：

<html>
    <head></head>
    <body>
        <div id="wrapper">
            <p>dsadfasfasfasfas</p>
            <p>dfasdsadasdasdas</p>
        </div>
    </body>
    <script src="/assets/js/app.min.js"></script>
</html>

在body标签内什么也不会显示。但是，如果我在网站顶部导入Vue，然后将以下代码替换为Webpack版本，则可以正常工作！

window.app = new Vue({
    el: '#wrapper',
    data: {
        test: 'hello world'
    },
    created() {
        console.log('Vue Running');
    }
});

修改

这也是被编译的 app.js ：

import Vue from 'vue';

// window.EventBus = new Vue();
window.app = new Vue({
    el: '#wrapper',
    data: {
        test: 'hello world'
    },
    created() {
        console.log('Vue Running');
    }
});

修改

这是我的webpack.config.js：

const path = require('path');
module.exports = {
    mode: 'production',
    entry: [
        './resources/js/vue/app.js'
    ],
    output: {
        filename: 'app.min.js',
        path: path.resolve(__dirname, 'public_html/assets/js/vue')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

编辑2

只需删除import vue from 'vue'，然后使用常规的script src=...方式将其导入即可。如果我导入vue并进行编译，那给我的印象是，这会在我的网站中包含vue吗？

Answer 1

那是因为您的Webpack配置不完整。

如果打开浏览器控制台，您将在此处看到

[Vue警告]：您正在使用Vue的仅运行时版本，而模板编译器不可用。可以将模板预编译为渲染函数，也可以使用编译器附带的内部版本。

您在#wrapper中的html是模板，但是Vue无法编译（和使用它），因为您的构建包括仅运行时版本的Vue。

只需将其添加到webpack.config.js：

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  },
},

这将包括Vue的运行时+编译器版本。

Answer 2

NPM软件包导出的默认内部版本是仅运行时内部。它没有模板编译器。因此，您要么需要在javascript中导入vue的完整版本，要么创建一个webpack别名（如果您使用的是webpack）。

使用渲染功能或“单个文件组件”定义模板时，不会发生此问题。

注意：

如果您不希望支持较旧的浏览器并且不使用最新的ES功能，则不需要babel-loader，如果您不使用单个文件组件，则不需要vue-loader。 / p>

还请注意，您必须在HTML <meta charset="utf-8">

中包含meta标签

这可行-

// webpack
module.exports = {
  mode: "production",
  entry: ["./app.js"],
  output: { filename: "./app.min.js" },
  resolve: { alias: { vue: "vue/dist/vue.js" } },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader"
      },
      {
        test: /\.vue$/,
        use: "vue-loader"
      }
    ]
  }
};

// app.js

import Vue from "vue";

// OR You do this if you dont want to use webpack alias
// import Vue from 'vue/dist/vue.js';

window.app = new Vue({
  el: "#app",
  data: { message: "Hello Vue!" },
  created() {
    console.log("<><><> Vue Created");
  }
});

<!-- index.html -->

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<div id="app">
    <p>{{message}}</p>
</div>
<script src="app.min.js"></script>
</body>
</html>

Answer 3

好的，

这很正常，因为您的编译版本如下：

import Vue from 'vue';

// window.EventBus = new Vue();
window.app = new Vue({
    el: '#wrapper',
    data: {
        test: 'hello world'
    },
    created() {
        console.log('Vue Running');
    }
});

但是浏览器如何知道如何导入“ vue”？

您的编译版本尚不支持浏览器，我认为您的构建配置不正确

可以提供吗？

将Vue添加到现有的旧网站，删除div而不是显示旧的html

3 个答案: