vue引入JS的问题

问题：今天在做项目（vue）时，碰到一个老旧的问题，引入JS让我一头雾水。

vue项目中，引入自定义JS，无非有两种，全局引入、单vue文件引入。无论哪种引入，首先你要了解一下import和require

import:引入的js，必须是export出来的对象，或者常量等。

require：commonJS类型对象。

具体方案：

一、全局式引入JS

    a.先准备自定义JS

//第一种写法
//尽量以对象形式，否则需要每个属性和方法前面都加上export 
let configs = {
    sdk:"sdk_v01.js"
    ...
}

//注意 default对象后，加载时直接  import config from '你的js'，
export default configs

//----------------------------------------------------------


//第二种写法，不加default导出的对象，引入时需要注意变量名要一致
let configs = {
    sdk:"sdk_v01.js"
    ...
}

//将导出的对象加上{}，此时，引入时：import {configs} from '你的js'，
export {configs}//{configs}必须一致，否则报错

    b 打开main.js，并import你的js，再为Vue对象绑定一个原型链属性。之后你就可以在任意文件中使用了

import config from "./configs/index.js" 

Vue.prototype.$config = config;

某个vue中用法：this.$config

 

二、单vue文件中引入JS

   a 依然准备好你的JS，同上

   b  引入并应用，但请注意，当调试时，不会显示你引入的对象，总是报错... is undefined。不要理会它，就直接用即可。

<template>
	<div class="hello">
		<button @click="fun">fun</button>
	</div>
</template>

<script>
    //config是引入的对象
	import config from "@/configs/index.js"

	console.log(config.sdk)
	var aa="../../static/js/"+config.text;
	import FUN  from "../../static/js/fun.js" // import引入的地址必须是常量


	export default {
		name: 'HelloWorld',
		data() {
			return {				
			}
		},
		methods: {
			fun() {
				FUN.myfun();
			}
		},
		mounted() {
			let _this = this;
			console.log(config.sdk) //可以直接输出config的属性或方法

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	
</style>

总结：引入JS文件，看自己的项目类型，有些可以通过WEBPACK配置，目前还是没掌握，所以个人小经验贴出来，不算高级，不喜勿喷。