先说明问题:在我未加shim依赖项的时候,页面加载时好时坏,报错信息
w.login.js?1566894776040:17 Uncaught TypeError: Vue is not a constructor
at Object.init (w.login.js?1566894776040:17)
at login.html?debug=true:70
at Object.execCb (require.js:1696)
at Module.check (require.js:883)
at Module.<anonymous> (require.js:1139)
at require.js:134
at require.js:1189
at each (require.js:59)
at Module.emit (require.js:1188)
at Module.check (require.js:938)
init @ w.login.js?1566894776040:17或者报错信息为
Uncaught TypeError: $ is not a function
at Object.<anonymous> (w.login.js?1566894776040:12)
at Object.execCb (require.js:1696)
at Module.check (require.js:883)
at Module.<anonymous> (require.js:1139)
at require.js:134
at require.js:1189
at each (require.js:59)
at Module.emit (require.js:1188)
at Module.check (require.js:938)
at Module.<anonymous> (require.js:1139)有时候有正常运行不报错
但是只要在config.js的shim里面加上'w.login':['jQuery','vue']这句话,就是下面被我注释的代码后,就再也不报错了,
我不明白,我在w.login.js里面的define中已经做了前置依赖,为什么require后还会报错,难道非要在shim中做依赖吗?
求各位大神指导下先上注释shim配置后的代码
config.js
(function() {
var config = {
baseUrl:(document.getElementById('_host').value || '') +'/scripts',
paths:{
"jQuery":'./libs/jquery-3.3.1/jquery-3.3.1.min.js?1563500302676',
"vue":"./libs/vue/vue.min.js?1563500302676",
"base64":"./libs/base64/base64.min.js?1563500302676",
"w.index":"./src/w.index.min.js?1563500302676",
"w.login":'./src/w.login.min.js?1566894776040',
"w.util":"./src/w.util.min.js?1563500302676"
},
shim:{
//'w.login':['jQuery','vue'],
'jQuery':{
exports:'$'
},
"base64":{
exports:'Base64'
}
}
}
//debug控制
if (location.href.indexOf('debug=true')>-1) {
for(var i in config.paths){
config.paths[i] = config.paths[i].replace(/\.min\.js(\?\d+)$/,'.js$1');
}
}
require.config(config);
})()然后是w.login.js的代码
/**
* 首页js
*
*
*/
define(['require', 'exports', 'module','jQuery','vue','w.util', 'base64'],function(require, exports, module) {
var $ = require("jQuery");
var Vue = require("vue");
var util = require("w.util");
var Base64 = require('base64');
var host = $('#_host').val();
module.exports = {
init:function(){
var logVue = new Vue({
el:"#login_box",
data:{
host:$('#_host').val(),
account:'', //账号
pwd:'', //密码
code:'',//验证码
normal_msg:'', //提示语
fail_msg:'',
past_msg:'',
n_hide:true,//提示语标签是否隐藏
f_hide:true,
p_hide:true,
a_error:false,//账号输入框错误样式
a_focus:false,//账号输入框获得焦点样式
p_error:false,
p_focus:false,
c_error:false,
c_focus:false,
codeUrl:host + '/getCode?' + Math.random()//验证码地址
},
methods:{
login:function(){
var account = $.trim(this.account);
var pwd = $.trim(this.pwd);
var code = $.trim(this.code);
var _this = this;
var showMsg = function(type, val, msg) {
_this.fail_msg = msg || '';
if(type == 'account'){
if (val === true) {
_this.a_error = true;
_this.f_hide = false;
}else{
_this.a_error = false;
_this.f_hide = true;
}
}else if(type == 'pwd'){
if (val === true) {
_this.p_error = true;
_this.f_hide = false;
}else{
_this.p_error = false;
_this.f_hide = true;
}
}else if (type == 'code') {
if (val === true) {
_this.c_error = true;
_this.f_hide = false;
}else{
_this.c_error = false;
_this.f_hide = true;
}
}
}
if (!account) {
showMsg('account', true, '请输入手机号或邮箱!');
return;
}else if (!util.regex.mobile.test(account)
&& !util.regex.email.test(account)) {
showMsg('account', true, '请输入有效的手机号或邮箱!');
return;
}else{
showMsg('account', false);
}
if (!pwd) {
showMsg('pwd', true, '请输入密码!');
return;
}else {
showMsg('pwd', false);
}
if (!code) {
showMsg('code', true, '请输入验证码!');
return;
}
},
getCode:function(){
this.codeUrl = this.host + "/getCode?" + Math.random();
}
}
});
}
}
});然后是jsp页面的引入
<input id="_host" type="hidden" value="${host }"/>
<script src="${host }/scripts/libs/requireJS/require${jsMin}.js"></script>
<script src="${host }/scripts/config${jsMin}.js"></script>
<script>
require(['w.login'], function(w) {
w.init && w.init();
});
</script>
w.login.js?1566894776040:17 Uncaught TypeError: Vue is not a constructor
at Object.init (w.login.js?1566894776040:17)
at login.html?debug=true:70
at Object.execCb (require.js:1696)
at Module.check (require.js:883)
at Module.<anonymous> (require.js:1139)
at require.js:134
at require.js:1189
at each (require.js:59)
at Module.emit (require.js:1188)
at Module.check (require.js:938)
init @ w.login.js?1566894776040:17或者报错信息为
Uncaught TypeError: $ is not a function
at Object.<anonymous> (w.login.js?1566894776040:12)
at Object.execCb (require.js:1696)
at Module.check (require.js:883)
at Module.<anonymous> (require.js:1139)
at require.js:134
at require.js:1189
at each (require.js:59)
at Module.emit (require.js:1188)
at Module.check (require.js:938)
at Module.<anonymous> (require.js:1139)有时候有正常运行不报错
但是只要在config.js的shim里面加上'w.login':['jQuery','vue']这句话,就是下面被我注释的代码后,就再也不报错了,
我不明白,我在w.login.js里面的define中已经做了前置依赖,为什么require后还会报错,难道非要在shim中做依赖吗?
求各位大神指导下先上注释shim配置后的代码
config.js
(function() {
var config = {
baseUrl:(document.getElementById('_host').value || '') +'/scripts',
paths:{
"jQuery":'./libs/jquery-3.3.1/jquery-3.3.1.min.js?1563500302676',
"vue":"./libs/vue/vue.min.js?1563500302676",
"base64":"./libs/base64/base64.min.js?1563500302676",
"w.index":"./src/w.index.min.js?1563500302676",
"w.login":'./src/w.login.min.js?1566894776040',
"w.util":"./src/w.util.min.js?1563500302676"
},
shim:{
//'w.login':['jQuery','vue'],
'jQuery':{
exports:'$'
},
"base64":{
exports:'Base64'
}
}
}
//debug控制
if (location.href.indexOf('debug=true')>-1) {
for(var i in config.paths){
config.paths[i] = config.paths[i].replace(/\.min\.js(\?\d+)$/,'.js$1');
}
}
require.config(config);
})()然后是w.login.js的代码
/**
* 首页js
*
*
*/
define(['require', 'exports', 'module','jQuery','vue','w.util', 'base64'],function(require, exports, module) {
var $ = require("jQuery");
var Vue = require("vue");
var util = require("w.util");
var Base64 = require('base64');
var host = $('#_host').val();
module.exports = {
init:function(){
var logVue = new Vue({
el:"#login_box",
data:{
host:$('#_host').val(),
account:'', //账号
pwd:'', //密码
code:'',//验证码
normal_msg:'', //提示语
fail_msg:'',
past_msg:'',
n_hide:true,//提示语标签是否隐藏
f_hide:true,
p_hide:true,
a_error:false,//账号输入框错误样式
a_focus:false,//账号输入框获得焦点样式
p_error:false,
p_focus:false,
c_error:false,
c_focus:false,
codeUrl:host + '/getCode?' + Math.random()//验证码地址
},
methods:{
login:function(){
var account = $.trim(this.account);
var pwd = $.trim(this.pwd);
var code = $.trim(this.code);
var _this = this;
var showMsg = function(type, val, msg) {
_this.fail_msg = msg || '';
if(type == 'account'){
if (val === true) {
_this.a_error = true;
_this.f_hide = false;
}else{
_this.a_error = false;
_this.f_hide = true;
}
}else if(type == 'pwd'){
if (val === true) {
_this.p_error = true;
_this.f_hide = false;
}else{
_this.p_error = false;
_this.f_hide = true;
}
}else if (type == 'code') {
if (val === true) {
_this.c_error = true;
_this.f_hide = false;
}else{
_this.c_error = false;
_this.f_hide = true;
}
}
}
if (!account) {
showMsg('account', true, '请输入手机号或邮箱!');
return;
}else if (!util.regex.mobile.test(account)
&& !util.regex.email.test(account)) {
showMsg('account', true, '请输入有效的手机号或邮箱!');
return;
}else{
showMsg('account', false);
}
if (!pwd) {
showMsg('pwd', true, '请输入密码!');
return;
}else {
showMsg('pwd', false);
}
if (!code) {
showMsg('code', true, '请输入验证码!');
return;
}
},
getCode:function(){
this.codeUrl = this.host + "/getCode?" + Math.random();
}
}
});
}
}
});然后是jsp页面的引入
<input id="_host" type="hidden" value="${host }"/>
<script src="${host }/scripts/libs/requireJS/require${jsMin}.js"></script>
<script src="${host }/scripts/config${jsMin}.js"></script>
<script>
require(['w.login'], function(w) {
w.init && w.init();
});
</script>
不知道用啥框架,requirejs用来模块加载js的,vue用来改页面数据方便些,jq就是用这顺手,jsp就当html页面看就行了,