ex: test.js
const referrerPhone = [
{ pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
]
export default {
referrerPhone
}
import validators from '../路径/test.js'
定义成对象方便调用
Vue.prototype.$validators = validators
this.$validators.referrerPhone
=======================================================================================================
第二种 不是公用
1.创建一个 js
// 弹框提示
function tips(this_, message_, type_){
this_.$message({
message: message_,
type: type_
})
export { //很关键
tips,
}
import { tips} from '../xx.js'
tips(this, '非法操作,不能删除admin用户!', 'error')
由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置。由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译。
例如config.js定义了一个变量叫config,并在index.html页面引入后,那么在页面任何一处地方都可以直接使用。
config.js:
index.html:
页面使用:
在开发环境中,我在public下创建了config.js文件,并且用export default方法进行导出。在页面使用的地方使用import config from XXX进入引入。开发过程中,没有出问题,但是在打包发布以后,发现修改config文件并不生效。
经过排查才意识到:不打包编译的js文件不识别es6语法,并且不应该使用import方法进行引入,应该按照原生的js文件进行使用。
原文地址: https://www.cnblogs.com/luoxuemei/p/11926472.html
目前项目有个需求就是,在vue页面中引入额外的config.js。常规引入有以下几种方法:1.main.js直接引用
2.index.html中标签引用
3.import引入
以上不符合我们业务需求,所以整理了第四种方式:通过组件,定义为script标签引入外部js
4.1-这个写法不太便于理解,我没有使用
4.2-我使用的方法
使用:
能看到已经被加载:
给个点击事件输出一下看看
完美