webpack- 两种方法解决: You are using the runtime-only build of Vue where the template compiler is not报错

最新推荐文章于 2022-04-28 15:54:57 发布

上海_彭彭

最新推荐文章于 2022-04-28 15:54:57 发布

阅读量931

点赞数 1

分类专栏： webpack 前端构建工具文章标签： runtime-only build webpack

本文链接：https://blog.csdn.net/qq_34979346/article/details/100015100

版权

webpack 前端构建工具专栏收录该内容

15 篇文章 0 订阅

订阅专栏

安装 vue

安装命令如下：

npm i vue -S

在webpack 使用vue

在main.js 导入 vue

import  Vue from 'vue'
var vm= new Vue(
    {
        el:'pp',
        data:{
            msg:'我是个好学生，爱学习，爱劳动，自己的事情自己做'
        }
    }
)

在index.html

<body>
<div id="pp">
    <h1>{{msg}}</h1>
</div>>
</body>

npm run dev 报错

VM660 vue.runtime.esm.js:620 [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.

原因：在webpack 中，使用 import Vue from ‘vue’ 导入的Vue 构造函数，功能并不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式.

查找原因- 包的查找规则

在项目根目录中有没有 node_modules文件夹
在 node_modules 中根据包名，找到对应的vue 为文件夹
在vue 文件夹中，找一个叫做 package.json 的包配置文件
在package.json 文件中，查找一个main属性，这个是包加载时候的入口

查找main属性指定的包
5. 根据指定的路径查找文件如下
在这里插入图片描述
问题根源已经找到，指定的文件有问题，所以我们的解决方法是替换这个路径就行了

解决方法

把路径替换成这个文件就行了，如下：

在这里插入图片描述

把main 换成我们要的路径就行了

 "module": "dist/vue.js",

我们不推荐这样改，可以在导入的时候指定路径如下

import vue from   '../node_modules/vue/dist/vue.js'

第二种感觉不雅观，我们在配置里重命名下就可以了

在webpack.config.js 配置如下：

  resolve:{
        alias:{//设置vue 被导入时候的包的路径
            "vue$":"vue/dist/vue.js"
        }
    },

修改了配置，要重运行 npm run dev, 大家试试吧，保证不报错了。

上海_彭彭

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录