vue 项目总结遇见的问题以及解决办法

1 在微信中分享网站，如何在地址栏中截取内容，并且重定向页面，重新添加新获取的内容

 if(/MicroMessenger/.test(window.navigator.userAgent)){ 
           var openId = this.getUrlKey("openid"); 
           if(openId==undefined || openId=="" || openId==null){  
               openId = this.getStorage(this.Storage.WX_openId);
               if(openId==undefined || openId=="" || openId==null){   
                    this.saveStorage("lastURI",location.href);   
                    location.href="http://你的微信域名地址/wx/load?redirectURL="+this.baseURL+"?token=413445f4545";
                    return;                  
               } 
           }else{
               this.saveWxUserStorage(openId);   
               var lastURI = this.getStorage("lastURI");
               if(lastURI==undefined || lastURI==""){
                  lastURI = this.baseURL;
               } 
               location.href=lastURI; 
           }           
         }else{ 
             this.clearStorage(this.Storage.WX_openId);
         } 

2 AXIOS 的函数封装

 

  

	Vue.prototype.post = function (url,data,fun,headers){	
	  			this.$axios.post(url,data,{headers:headers})
	             .then(function (response) {
	                if(fun){ 
	                  fun(response.data);
	                }
	            })
	            .catch(function (error) {
	            	// alert(error)
	            });
	}

	Vue.prototype.get = function (url,data,fun,headers){ 
    	this.$axios.defaults.withCredentials = true 
	  	this.$axios.get(url,{headers:headers,params: data})
	             .then(function (response) {
	                if(fun){
	                  fun(response.data);
	                }
	            })
	            .catch(function (error) {
	            	// alert(error);
	            });
	}
	

3 生产模式和线上模式地址配置

 

 

config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT:"'http://test.youxiu326.xin/api/v2'",
})

config/prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT:"'http://自己的域名/api/api/v2/'",
}

如何访问： process.env.API_ROOT;

4 打包之后页面空白的问题

assetsPublicPath: './',

5 app.js的体积过大分割项目，实现懒加载

const Home = r => require.ensure([], () => r(require('@/pages/Home')), 'home') 

6 数据请求的跨域

在config/index.js中配置

proxyTable: { '/api':{ target: "http://localhost:3000", changeOrigin:true, pathRewrite:{ '^/api':'/' } }

使用方式是'^/api':'/' 替代了路径的，所以使用的时候

在axios 中默认的'/api'

axios.defaults.baseURL = '/api'

在页面中使用

this.post('user',{userName:this.user.userName,email:this.user.email},function(res){ console.log(res); })

vue 框架的使用遇见的坑还会有很多，目前我能总结出来就是这些了，希望能帮助到哪些有需要的小伙伴。