vuecli3配置webpack_vue可以不用webpack吗

vuecli3配置webpack_vue可以不用webpack吗前言如果我们想在webpack中使用vue,就需要在webpack中配置vue配置vue首先,我们需要在项目中安装vue,安装命令如下:npminstallvue–save安装完成后

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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账号...

(0)


相关推荐

  • jquery tmpl 详解「建议收藏」

    jquery tmpl 详解「建议收藏」转自:http://www.cnblogs.com/zhuzhiyuan/p/3510175.html动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等。 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在浏览器端拼数据就在服务器端拼数据。不过,从传输量方面来看,返回 HTML

  • 戴尔服务器的远程开机和关机

    戴尔服务器的远程开机和关机手上有一台戴尔的DELLPowerEdgeR210服务器,闲来无事,研究了一下它的远程开机和关机。Dell的服务器默认都带BMC,这个用来做管理的网口和操作系统是共用的同一个网口(注意必需是第一个网口,即服务器上标有1的那个),只要BMC里设置的IP地址和操作系统的IP不一样就可以了。BMC的设置很简单,按以下步骤进行设置:1、在服务器启动时看到Press<Ct…

  • 二维数组和指针_二维数组与指针

    二维数组和指针_二维数组与指针二维数组和指针⑴用指针表示二维数组元素。要用指针处理二维数组,首先要解决从存储的角度对二维数组的认识问题。我们知道,一个二维数组在计算机中存储时,是按照先行后列的顺序依次存储的,当把每一行看作一个整体,即视为一个大的数组元素时,这个存储的二维数组也就变成了一个一维数组了。而每个大数组元素对应二维数组的一行,我们就称之为行数组元素,显然每个行数组元素都是一个一维数组下面我们讨论指针和二维数组元

    2022年10月26日
  • Python保留小数位数_python怎么保留三位小数

    Python保留小数位数_python怎么保留三位小数python处理保留小数位数,包括四舍五入和不四舍五入。

  • Java事务详解[通俗易懂]

    Java事务详解[通俗易懂]1.什么是JAVA事务?通常的观念认为,事务仅与数据库相关。事务必须服从ISO/IEC所制定的ACID原则。ACID是原子性(atomicity)、一致性(consistency)、隔离性(isolation)和持久性(durability)的缩写。事务的原子性:表示事务执行过程中的任何失败都将导致事务所做的任何修改失效。事务的一致性:表示当事务执行失败时,所有被该事务影响的数据…

  • 基于Ubuntu20.04 Linux系统安装 Microsoft Edge浏览器 详细步骤

    基于Ubuntu20.04 Linux系统安装 Microsoft Edge浏览器 详细步骤目录1.MicrosoftEdge注意:最近在学习强度学习,作为刚起步的小白啥也不懂就先安装了最新的Ubuntu20.04,听很多人说这个版本相对之前的版本可以很方便的链接网络,个人感觉还不错。  个人之前一直使用Windows系统,初次接触Linux有不足之处请读者多多包含。在Windows系统的时候使用的浏览器,我还是比较喜欢使用MicrosoftEdge,之前用过一段时间的Chrome的参考资料:基于Linux的MicrosoftEdge浏览器1.Microsoft

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号