问题:今天在做项目(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配置,目前还是没掌握,所以个人小经验贴出来,不算高级,不喜勿喷。