vue-cli axios ie9 问题

Vue兼容IE9实战

vue在ie9中碰到的问题

最近我们的项目选择用vue来做开发,在这个过程我们还要兼容ie9这个坑,在这里我写一点我碰到的坑

  • 开发选用:vue+vue-cli+axios+router+iview+mock

首先我们按照步骤来安装vue-cli 
创建项目运行

npm install
npm run dev
  • 1
  • 2

然后我们在ie9下打开发现没有用但是vue官网告诉我们他是兼容ie9的这里写图片描述

官网地址:https://github.com/vuejs/vue

下图是错误提示ie9: 
这里写图片描述 
然后就找资料查文档,总算给我找到了。 
要实现其实很简单,只需要我们下载一个babel-polyfill,

npm install babel-polyfill --save-dev
  • 1

下载完成后我们怎么用它 
这时我们要找到build文件夹下webpack.base.conf.js在里面修改一下就行了

module.exports = {
  entry: {
    app: './src/main.js' },
  • 1
  • 2
  • 3
  • 4

改成

module.exports = {
  entry: {
    'babel-polyfill': 'babel-polyfill', app: './src/main.js' },
  • 1
  • 2
  • 3
  • 4
  • 5

就ok了 是不是很简单

第二问题就是axios的请求在ie下没有用 
这个怎么解决? 
也是就是下载一个js的问题 
下面就直接贴代码

npm install es6-promise --save-dev
  • 1
/*main.js下*/
 import promise from 'es6-promise'
 promise.polyfill()
  • 1
  • 2
  • 3

 

 

 

 

 

辛辛苦苦把项目写好了,然后再Chrome跑的天衣无缝。然后经理告诉我要兼容ie9及以上。信心满满的拿出来试了试。GG思密达!!!

一、Pormise的问题,原来是Axios不能直接兼容IE9

先去项目里下载es6-promise

npm install es6-promise

然后去页面导入

import promise from 'es6-promise';
promise.polyfill();
二、URLSearchParams未定义的问题,原来是IE9不支持URLSearchParams。(千万别用一些不被大众浏览器兼容的东西,都是坑)

先去项目里下载qs

npm install qs

然后去Axios放参数的时候这样放

import qsfrom 'qs';
var params = {
'param1':1,
'param2':2
}
qs.stringify(params)
三、GET方法在IE9会直接默认去拿缓存,返回的是304而不是正常拿到数据后的200.
这个就在GET方法的params中加个时间戳就行了。
time:new Date().getTime()
 
 
 
 

转载于:https://www.cnblogs.com/zhengyan/p/8111203.html

<think>嗯,用户想了解如何在学生宿舍管理系统中配置Vue.js项目,特别是使用vue-cli、Element UI和Vuex。首先,我得回忆一下Vue项目的基本搭建步骤。用户可能已经知道一些基础知识,但需要具体的配置指导,所以应该从项目创建开始。 然后,用户提到了Element UI,这是一个常用的UI框架,需要安装和配置。我应该说明如何通过npm安装,以及按需引入组件的方法,这样可以减少打包体积。记得提到修改babel.config.js文件,这个步骤有时候容易被忽略,导致组件样式不加载。 接下来是Vuex的配置。用户可能需要状态管理来处理宿舍、学生等数据,所以需要创建store实例,并展示如何在组件中使用。这里要确保用户理解如何定义模块,比如dormitory和student模块,方便扩展。 路由配置也是关键,尤其是嵌套路由。参考用户提供的引用[1],系统管理员的路由结构有子路由,比如添加宿舍和管理宿舍。所以需要解释如何用Vue Router设置嵌套路由,确保路径正确,组件正确加载。 另外,用户可能遇到依赖项的问题,比如版本兼容性。需要提醒检查vue、element-ui、vuex和vue-router的版本,避免冲突。给出示例的package.json部分可以帮助用户对照自己的配置。 最后,配置完成后,如何运行项目也是必要的步骤,比如npm run serve启动开发服务器。可能还要提到一些常见问题,比如按需引入Element组件时样式丢失,或者路由不生效的情况,如何排查这些错误。 总结一下,回答需要分步骤,涵盖项目创建、安装依赖、配置Element UI和Vuex、设置路由结构,以及版本注意事项。同时,结合用户提供的引用中的路由结构示例,具体说明如何实现嵌套路由,这样用户能更直观地应用到自己的项目中。</think>### Vue.js项目配置指南(学生宿舍管理系统) 根据路由配置示例[^1]和拦截器代码结构[^2],以下是使用vue-cli搭建项目的完整流程: 1. **项目初始化** ```bash vue create student-dormitory-management-system # 选择Manually select features # 勾选Babel, Router, Vuex, Linter cd student-dormitory-management-system ``` 2. **Element UI安装与配置** ```bash npm install element-ui -S ``` 在main.js中配置: ```javascript import ElementUI from &#39;element-ui&#39; import &#39;element-ui/lib/theme-chalk/index.css&#39; Vue.use(ElementUI, { size: &#39;small&#39; }) ``` 3. **Vuex状态管理配置** 创建store模块化结构: ```javascript // store/modules/dormitory.js export default { namespaced: true, state: () => ({ dormList: [] }), mutations: { SET_DORM_LIST(state, list) { state.dormList = list } } } ``` 4. **路由配置(参考引用[1]结构)** ```javascript // router/index.js { path: &#39;/systemAdmin&#39;, component: () => import(&#39;@/views/SystemAdmin&#39;), children: [ { path: &#39;dormitoryAdminAdd&#39;, name: &#39;添加宿舍&#39;, component: () => import(&#39;@/views/DormitoryAdminAdd&#39;) }, { path: &#39;dormitoryAdminManager&#39;, name: &#39;宿舍管理&#39;, component: () => import(&#39;@/views/DormitoryAdminManager&#39;) } ] } ``` 5. **关键依赖版本建议(package.json)** ```json "dependencies": { "vue": "^2.6.14", "element-ui": "^2.15.14", "vuex": "^3.6.2", "vue-router": "^3.5.4" } ``` ### 常见配置问题解决方案 1. **Element UI按需加载优化** ```bash npm install babel-plugin-component -D ``` 修改babel.config.js: ```javascript module.exports = { presets: [&#39;@vue/cli-plugin-babel/preset&#39;], plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } ``` 2. **路由拦截配置(参考引用[2])** ```javascript // 添加前置路由守卫 router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { if (!store.state.user.token) { next(&#39;/login&#39;) } } next() }) ``` 3. **API请求拦截器** ```javascript // utils/request.js axios.interceptors.request.use(config => { config.headers[&#39;Authorization&#39;] = store.state.user.token return config }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值