Vue + ts 全局组件挂载（附：生成环境失效问题）

前言

以前使用vue 时，在main.js中使用Vue.component 实现全局挂载，加上ts环境后 就换了种写法。下面跟大家分享一下。

代码

main.ts

import Vue from "vue";
import Components from "./components/index.ts"

Vue.use(Components);

index.ts

在 components目录下，创建index.ts 主要用来引入全局组件。

import { VueConstructor } from 'vue'
// 全局组件
import InfoTip from "@/components/public/InfoTip.vue";

const components = [
  InfoTip,
];

const component = {
  install: (Vue: VueConstructor) => {
    components.forEach((component) => {
      Vue.component(component.name, component);
    })
  }
}
export default component

InfoTip.vue

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'

@Component({
  name: 'InfoTip',
})
export default class InfoTip extends Vue {}
</script>

以上全局组件挂载的时候，在development 开发环境 中使用时可用，然而在生产环境使用 组件失效。目前解决以下方案有两种。

• webpack 的配置参数 optimization.minimize 默认为true，用于压缩打包后的js。而压缩后component.name的组件名也因此改变了。将该参数改为fasle，就可以使用了。

module.exports = {
...
chainWebpack: (config) => {
	// 默认为true，效果就是压缩js代码。
	config.optimization.minimize(false);
}
...
}

• 将上述的index.ts 中 component.name 改用 另名 entryName 代替，同时 组件中定义该名并赋值为name的值，最后在vue-prototype.d.ts 中定义即可。

index.ts

import { VueConstructor } from 'vue'
// 全局组件
import InfoTip from "@/components/public/InfoTip.vue";

const components = [
  InfoTip,
];

const component = {
  install: (Vue: VueConstructor) => {
    components.forEach((component) => {
      Vue.component(component.entryName, component);
    })
  }
}
export default component

InfoTip.vue

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'

@Component({
  name: 'InfoTip',
})
export default class InfoTip extends Vue {
	public static entryName = 'InfoTip'
}
</script>

vue-prototype.d.ts

declare module "vue/types/vue" {
	interface VueConstructor {
    	entryName: string;
  	}
}

以上就是全部了，自己也是踩了一些坑，最后还有小伙伴不懂操作的可以考虑按需引入~