归档__webpack中使用vue引入过程中报错小记

最新推荐文章于 2023-12-25 15:38:02 发布

原创最新推荐文章于 2023-12-25 15:38:02 发布 · 333 阅读

CC 4.0 BY-SA版权

本文详细介绍了在Webpack环境中，Vue的两种正确导入方法，包括修改node_modules中Vue的引用路径，以及在webpack.config.js中设置alias。同时，文章还回顾了Vue包的查找规则，为开发者提供了在Webpack中使用Vue的全面指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在webpack中尝试使用Vue
注意：在webapck中，使用import Vue from "vue"导入的Vue构造函数，功能并不完整，只提供了runtime-only的方式，并没有提供像网页中那样的使用方式。
在这里插入图片描述

导致报如下图中的错误：
[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 . (found in )//您正在使用的是runtime-only构建的包，并不一个最全的Vue的
在这里插入图片描述
解决办法有两种：
第一种：找到node_modules包中的vue文件夹，找到package.json查找到main属性修改后面根的路径把vue.runtime.common.js 改为vue.js即可。

或者更改：
main.js中vue的引入方式为：把import Vue from ‘vue’ 改为 import Vue from ‘…/node_modules/vue/dist/vue.js’
它与普通用script标签引入的是一样的，都是最全的包。

第二种：在webpack.config.js中找到与entry,output,plugins,module同级目录下加入以下代码：即可解决报错（推荐使用第二种）

 resolve: {
    alias: { // 修改 Vue 被导入时候的包的路径
      	 "vue$": "vue/dist/vue.js"     //弊端：此方法会导致修改了项目后每次都需要重新启动项目
    }
  }

回顾包的查找规则：
1.找项目根目录中有没有node_modules的文件夹
2.在node_modules中，根据包名找对应的vue文件夹
3.在vue文件夹中，找一个叫做package.json的包配置文件
4.在package.json文件中，查找一个main属性【main属性指定了这个包在被加载时候的入口文件】

// 总结梳理： webpack 中如何使用 vue :
// 1. 安装vue的包： cnpm i vue -S
// 2. 由于在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
// 3. 在 main.js 中，导入 vue 模块 import Vue from ‘vue’
// 4. 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style
// 5. 使用 import login from ‘./login.vue’ 导入这个组件
// 6. 创建 vm 的实例 var vm = new Vue({ el: ‘#app’, render: c => c(login) })
// 7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；