Can*_*ian 2 webpack vue.js webpack-cli vuejs3 webpack-5
我Vue 3.0.5使用Webpack 5.21.2和创建了一个应用程序Webpack CLI 4.5.0。我构建了一个全局组件my-component.js：
import SecondComponent from './second-component.vue';
app.component('global-component', {
template: `
<div>
<h1>Hi!</h1>
<second-component></second-component>
</div>
`,
components: {
SecondComponent
}
})
导入的second-component.vue：
<template>
<div>
<div>{{someData}}</div>
<third-component :name="helloWorld"></third-component>
</div>
</template>
<script>
import ThirdComponent from './third-component.vue';
export default {
name: 'second-component',
components: {
ThirdComponent
},
data: function () {
return {
someData: 'Just some data!',
helloWorld: 'Hello World!',
}
}
}
</script>
第三个组件third-component.vue：
<template>
<div>
<div>{{name}}</div>
</div>
</template>
<script>
export default {
name: 'third-component',
props: {
name: String,
}
}
</script>
下面是 webpack 配置webpack.config.js：
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
mode: 'production',
entry: {
global_component: './global-component.js',
},
output: {
path: `${__dirname}`,
filename: '[name]_bundled.js'
},
resolve: {
extensions: ['*', '.js', '.vue']
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
我在index.html 中使用的包文件是这样的：
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
<script>const app = Vue.createApp({});</script>
<script type="application/javascript" src="global_component_bundled.js"></script>
<div id="app">
<global-component></global-component>
</div>
<script>app.mount("#app");</script>
</body>
我得到的问题是子组件的子组件没有渲染。就我而言，这是我要导入second-component.vue的组件third -component.vue。但是，当我将组件third-component.vue直接用于my-component.js 时，它可以工作。有人可以解释为什么以及如何解决这个问题吗？这里我有一个代码盒。
我寻找了很长时间的解决方案，最终我得到了它。我使用了vuefrom CDN，在这种情况下我应该说webpack使用外部Vue. 只需在webpack.config.js 中更改此配置：
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
...
externals: {
// Here you tell webpack to take Vue from CDN
vue: "Vue"
},
...
}
通过这些更改webpack捆绑组件并Vue从CDN. 我希望这个答案能帮助其他人。在这里，我已经进行了更改：codeandbox。