大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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
中的信息了
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165730.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...