首次用webpack导入 Vue包时可能出现的问题和解决办法

曾经终败给现在 2022-12-20 11:14 39阅读 0赞

假如通过CDN的方式script标签引入Vue的包，那么久需要：
    1，script引入Vue包；
    2，创建Vue实例 new vue({})；
    3，挂载容器el 或 $mount()

**如果通过 webpack来导入Vue的话则需要：  
1，通过npm 下载 Vue的包：cnpm i vue -S  
2，在入口函数main.js 处导入 import Vue from ‘vue’  
3，再进行挂载，运行，但是会出现问题，如下：**  
![在这里插入图片描述][2020111122011582.jpg_pic_center]  
【原因】：import Vue from ‘vue’ 时导入的vue 不是 真正的vue.js文件而是缺省的文件，在node\_modules/vue/dist 中可以查看到有多个vue版本，如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]  
**但在node\_modules/vue/package.json 的文件中找到导入的入口属性 main 时会看到 其原本导入的路径并不是真正的vue.js文件，如图：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 1]  
【解决办法】：  
① 直接修改main 属性的路径 （不推荐）  
② 在main.js入口处导入时直接导入vue.js的文件：import Vue from ‘…/node\_modules/dist/vue.js’ （不推荐）  
③ 修改package.config.js 配置文件，如图：（推荐）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 2]

[2020111122011582.jpg_pic_center]: /images/20221120/d776f1c85f2644e3957ad2b5741b9124.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/0627ff891cbc4f7d8516d696c19c9ad7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201111220846375.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201111221542165.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw==,size_16,color_FFFFFF,t_70#pic_center