大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
前言
如果我们想在webpack中使用vue，就需要在webpack中配置vue
配置vue
首先，我们需要在项目中安装vue，安装命令如下：
npm install vue --save
安装完成后，我们在主入口main.js文件中导入vue并创建一个实例
import Vue from 'vue'
const app = new Vue({
el: "#app",
data: {
message: "hello"
}
})
最后我们在index.html中，写入模板代码如下：
<div id="app">
<h2>{{message}}</h2>
</div>
修改完成后我们重新运行命令打包npm run build，但是运行程序，在页面上没有出现想要的效果，且控制台里报错如下
vue.runtime.esm.js:623 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
这个错误的意思是说我们使用的runtime-only的版本Vue，是不能包含模板代码的，而我们正好使用了模板代码，所以报错
解决方案
解决办法就是在webpack中配置以下内容
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: "dist/"
},
// 新增的vue配置，给vue取别名
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
}
},
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.png/,
type: 'asset'
},
],
},
}
配置完成之后，我们在访问首页，就能正常显示message中的信息了
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/165384.html原文链接：https://javaforall.net
