将Vue添加到现有的旧网站，删除div，而不是显示旧html。
我试图用Vue包装我的旧网站，所以所有旧的jQuery脚本都应该继续运行，所有旧的el都应该显示出来，但是由于某种原因，el和它里面的所有东西都被删除了。
这是在使用脚本的when打包版本时，因此，例如：
<html>
<head></head>
<body>
<div id="wrapper">
<p>dsadfasfasfasfas</p>
<p>dfasdsadasdasdas</p>
</div>
</body>
<script src="/assets/js/app.min.js"></script>
</html>身体标签里什么都不会显示。但是，如果我在网站顶部导入Vue，并将下面的代码替换为and打包的版本，它就可以正常工作了！
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在我的网站？
回答 3
Stack Overflow用户
发布于 2019-02-26 22:51:58
NPM包导出的默认生成是仅运行时生成。它不会带来模板编译器。因此，您需要在javascript中导入vue的完整构建版本，或者创建一个webpack别名(如果您使用webpack)。
当使用呈现函数或单个File组件定义模板时，不会出现此问题。
注意：
如果您不希望支持旧的浏览器，如果您不使用最新的ES功能，那么您就不需要babel-loader，如果您不使用单个文件组件，则不需要vue-loader。
还请注意，您必须在HTML <meta charset="utf-8">中包含元标记。
这会奏效的-
// 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>Stack Overflow用户
发布于 2019-02-26 17:09:23
那是因为你的Webpack配置不完整。
如果您打开浏览器控制台，您将看到：
Vue警告:在模板编译器不可用的情况下，您使用的是仅运行时构建的Vue。要么将模板预编译成呈现函数，要么使用编译器包含的构建。
#wrapper中的html是一个模板，但是Vue不能编译(并使用它)，因为您的构建包含仅运行时版本的Vue。
只需将其添加到webpack.config.js
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
},这将包括Vue的runtime+compiler构建。
Stack Overflow用户
发布于 2019-02-24 18:43:11
好吧那么，
这是正常的，因为编译后的版本如下所示：
import Vue from 'vue';
// window.EventBus = new Vue();
window.app = new Vue({
el: '#wrapper',
data: {
test: 'hello world'
},
created() {
console.log('Vue Running');
}
});但是浏览器如何知道如何导入'vue‘呢？
您的编译版本尚未准备好浏览器，我认为您的构建配置是不正确的。
你能提供吗？
https://stackoverflow.com/questions/54831488
复制相似问题
腾讯云开发者
