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)


相关推荐

  • acwing-2175. 飞行员配对方案问题(二分图|最大流)「建议收藏」

    acwing-2175. 飞行员配对方案问题(二分图|最大流)「建议收藏」第二次世界大战时期,英国皇家空军从沦陷国征募了大量外籍飞行员。由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的 2 名飞行员,其中 1 名是英国飞行员,另 1 名是外籍飞行员。在众多的飞行员中,每一名外籍飞行员都可以与其他若干名英国飞行员很好地配合。如何选择配对飞行的飞行员才能使一次派出最多的飞机。对于给定的外籍飞行员与英国飞行员的配合情况,试设计一个算法找出最佳飞行员配对方案,使皇家空军一次能派出最多的飞机。输入格式第 1 行有 2 个正整数 m 和 n。m 是外籍飞行员数;

  • map遍历的几种方式分别是什么「建议收藏」

    map遍历的几种方式分别是什么「建议收藏」map遍历的方式有4种1、使用for循环遍历map;2、使用迭代遍历map;3、使用keySet迭代遍历map;4、使用entrySet遍历map。java代码:Map<string

  • STUN详解

    STUN详解STUN是一个简单的客户端-服务器协议。客户端发送一个请求到一台服务器,而服务器返回一个响应。有两种类型的请求:绑定请求(通过UDP发送)和共享密钥请求(发送TLS(通过TCP))。共享秘密请求服务器返回一个临时的用户名和密码。此用户名和密码用于在随后的绑定请求和绑定响应,身份验证和消息完整性的目的。STUN客户和STUN服务器之间可能有一个或多个NAT。

  • 银河麒麟v10 centos_银河麒麟创建root用户

    银河麒麟v10 centos_银河麒麟创建root用户由于现在很多软件安装时都需要安装一系列的依赖,出于安全考虑服务器又不一定都能够连接外网。故需要本地配置yum源,当前也可以配置外网yum源(前提是要能够访问外网)

  • 多线程中 ManualResetEvent 的用法[通俗易懂]

    多线程中 ManualResetEvent 的用法[通俗易懂]///<summary>///手动重启///</summary>privateManualResetEventmanualReset=newManualR

  • Oracle创建表空间、创建用户的完整过程「建议收藏」

    Oracle创建表空间、创建用户的完整过程「建议收藏」我在工作学习过程中经常用到Oracle,由于经验欠缺,熟练度不足,每次都要百度一下。现在总结一下Oracle创建用户的过程,分享给大家。这里我就直接把sql语句贴出来,使用时直接复制粘贴即可。/*步骤:1、创建表空间2、创建用户3、用户授权*//*创建表空间*/createtablespaceQCJ_TABLESPACE…

发表回复

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

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