记一次 vue 打包的问题

雨点打透心脏的1/2处 2022-05-24 08:46 295阅读 0赞

事件的经过：

一开始采取了 vue 、axaio、vue-router 等不打包在一起的方式，，后来发现总项目并不大，就想把它们都打包在一起算了，，，然后问题出来了

# 1、连接进项目的 ,mint 的一些组件找不到 #

import {Toast,Indicator,Loadmore ,Picker} from 'mint-ui';

直接调用  toast 和 Indicator 的时候为  undefined？？？？？

在外接 vue 的时候却可以用，，打包在一起的时候就找不到了？？？ 原因不是很明白（找到答案再更新）

**解决：**

把他们接入 vue

Vue.prototype.$indicator = Indicator;
    Vue.prototype.$toast = Toast;

# 2、组件名称只能包含字母数字字符和连字符，并且必须以字母开头。 #

在外接 vue 的时候却可以用，，打包在一起的时候就报这种错。。见鬼了

\[Vue warn\]: Invalid component name: "我发布的". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.

![20180524111315449][]

# 3、自己写的弹框组件模板里的方法没在  methods  里面定义，我在 js 文件里定义了，然后报错 #

Property or method "subStateClick" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See

![20180524112058166][]

![20180524112109409][]

**解决：**

**在 methods 里面先定义一个方法，然后通过 js 改写**

**4、组件里传进去的参数又在data 里面定义过，然后报错**

The data property "show" is already declared as a prop. Use prop default value instead.

**解决：把组件里重复定义的去掉就好了**

[20180524111315449]: /images/20220524/698c705cceeb4eeeb0d5f4318cda6be7.png
[20180524112058166]: /images/20220524/da5da7afd69b4980818b6ce00d705b6c.png
[20180524112109409]: /images/20220524/bb664893731c43f1b98cfb1726f53f79.png