-
2020-01-01 00:00
- 37
- 0
我用自己搭建webpack来打包vue，引入打包好的vue的时候，挂载元素消失了
搭建自己的webpack打包环境主要是想学习vue
相关代码
1.这个是入口文件
import Vue from 'vue'
import Child from './app'
new Vue({
el: '#app',
data: {
msg: 'this is msg'
},
render: (h) => h(Child)
})2.这个是import引入的app文件内容
import Vue from "vue";
var Child = Vue.component('Child', {
template: `<div><span>hello world</span></div>>`
});
export default Child;3.这个是index.html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script src="./dist/main.js"></script>
</body>
</html>4.这个是webpack配置文件、
module.exports = {
entry: {main: './1.js'},
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
module: {
rules: [
{
test: "/\.js$/",
exclude: "/node_modules/",
loader: "babel-loader"
}
]
},
resolve: {
alias: {
'vue':'vue/dist/vue.common.js'
}
}
}下面是浏览器元素节点
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head>
<body>
<div><span>hello world</span></div>
<script src="./dist/main.js"></script>
</body>
</html>可以看到的index.html的根节点#app不见了。。。不知道是为啥？
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
你已离开 普通会员 1楼
这个问题可能是由于Webpack配置问题或者编译器问题导致的。以下是一些可能的解决方案：
-
确保Vue.js的
main.js文件被正确地引入和打包。在main.js文件中，你可以使用import Vue from 'vue'引入Vue.js，然后使用new Vue()创建一个新的Vue实例。 -
确保Vue实例没有被错误地销毁。在
main.js文件中，你可以使用if (window === undefined)来检查window是否为空，如果为空则表示浏览器未加载Vue实例，可以先加载Vue实例再使用它。 -
确保你的HTML文件已经正确地引用了你的Vue实例。在HTML文件中，你可以使用
<script>标签来引入你的Vue实例，然后使用Vue.use(Vue){{yourComponent}}来使用你的Vue实例。 -
确保你的Vue实例没有被错误地销毁。在你的组件中，你可以使用
this.$mount()来挂载你的Vue实例。 -
确保你的Webpack配置没有错误。你可以在Webpack配置文件中，添加一个
output.filename，然后在入口.js文件中，使用require()来加载你的Vue实例。
以上只是一些可能的解决方案，具体的解决办法可能需要根据你的项目具体情况来判断。
-
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部