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

安装 vue

安装命令如下：

npm i vue -S

在webpack 使用vue

在main.js 导入 vue

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

在index.html

    
{{msg}}
>

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 的方式， 并没有提供像网页中那样的使用方式.

查找原因- 包的查找规则

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

5. 根据指定的路径查找文件 如下

问题根源已经找到，指定的文件有问题，所以我们的解决方法是替换这个路径就行了

解决方法

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

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

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

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

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

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

   在webpack.config.js 配置如下：

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

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