javascript - `document` 在 webpack vue.js 之后为空
问题描述
我尝试用 vuejs 和 webpack 构建一个项目。
这是我的 index.js
import Vue from 'vue'
import App from './app.vue'
console.log(document.body)
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
render:(h) => h(App)
}).$mount(root)
在 webpack 到 bundles.js 并在浏览器上运行它之后,它会上升:
如您所见,文档变为空。
为什么文件不起作用?这个错误是我的问题还是来自 vue.js?
这是我的 webpack.config.js:
const path = require("path")
module.exports = {
entry:path.join(__dirname,"./src/index.js"),
output: {
path: path.join(__dirname,"dist"),
filename: "bundle.js"
},
module:{
rules:[
{
test: /\.vue$/,
loader:"vue-loader"
},
{
test:/\.css$/,
use:[
'style-loader',
"css-loader"
]
},
{
test:/\.(gif|jpg|jpeg|png|svg)$/,
use:[
{
loader: "url-loader",
options: {
"limit":1024,
name:"[name]-aaa.[ext]"
}
}
]
}
]
}
}
这是 package.json
{
"description": "todolist",
"license": "MIT",
"scripts": {
"build": "webpack --config webpack.config.js"
},
"dependencies": {
"vue": "2.5.16"
},
"devDependencies": {
"webpack-cli": "^3.0.3",
"webpack": "^4.11.1",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"vue-loader": "^14.2.2",/*15. 版本不行*/
"vue-template-compiler": "^2.5.16"
}
}
解决方案
我假设你index.js
被放置在 HTML 的头部,并且由于 JavaScript 资源被阻塞,你的 body 甚至还没有被定义。
您需要将 JavaScript 放在您的目标元素之后,或者您需要使用onload
事件。
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
推荐阅读
- oracle-apex - 多过滤器 ORACLE Apex 弹出 LOV
- amazon-web-services - 具有 ECS 蓝/绿部署的 AWS CodePipeline 失败并出现内部错误 | 拿 2
- javascript - 数组包含查询不起作用反应本机
- python - 查找树内最近的节点
- macos - 无法在 zsh macos 中设置 lang
- image - 选择关键帧的有效方法是什么
- c - 为 C 中的结构分配内存后的分段错误
- jmeter - 将 JMeter 报告与 Jira/Zephyr 集成的工具
- mysql - 查找通用 ID 集以合并 ID 表
- nltk - 查找一个短语在英语中是否“普遍罕见”