Vue-cli开发中的常见问题

1. 解决跨域请求

config/index.js

module.exports = {
  dev: {
    proxyTable: {
      '/api': {
        target: 'http://www.xxxx.com', // 代理目标
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
  }
}

组件

this.$http.get('api/xxx').then(res => {})

2. axios的post提交，服务端接收不了参数

打开Chrome的Network面板，发现参数以Json的形式放在了Request Payload中:

解决办法

main.js

// 使用qs模块
import qs from 'qs'
import axios from 'axios'
Vue.prototype.$http = axios
Vue.prototype.$qs = qs
// 设置默认请求头Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

组件

// 使用qs进行数据的处理
let data = this.$qs.stringify({
  query: 'xxx',
  sign: 'xxx'
});
// post请求
this.$http({
  method: "post",
  url,
  data
}).then(res => {
  
})

正常的参数应该是在From data中

3. 兼容IE8+

babel 默认只转换新的 Javascript 句法，而不转换新的 Api ，比如Generator、Set、Symbol、Promise 等全局对象，为了解决这个问题，我们使用一种叫做 Polyfill（代码填充，也可译作兼容性补丁） 的技术

npm install babel-polyfill --save-dev

main.js

// 放在最顶部
import 'babel-polyfill'

build/webpack.base.conf.js

module.exports = {
  entry: {
    app: ['babel-polyfill', './src/main.js']
  }
}

4. 缓存

新版本发布之后(cnpm run build)，浏览器访问还是看到上个版本的内容

解决办法1

把服务器的文件全部删除，再上传，而不是直接覆盖

解决办法2

build/webpack.prod.conf.js

const webpackConfig = merge(baseWebpackConfig, {
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[hash].js'),
    chunkFilename: utils.assetsPath('js/[id].[hash].js')
  },
})

5. 手机同步热更新

1. 跟电脑连同个WI-FI，查看自己本机的IP地址，打开命令行，输入ipconfig
   

2. config/index.js
   

3. 手机打开浏览器访问http://192.168.1.132:8080就可以了

6. 出现资源引用错误的解决方案

build/index.js，将’/‘修改为’./’

7. 出history模式下刷新当前路由出现404的问题

需要后端进行配合,参考https://router.vuejs.org/zh/guide/essentials/history-mode.html

8. 封装自己的组件脚本

可以在组件中以this.$xxx的方式调用，而不需要引入改Js脚本
dialog.js

const dialog = (function () {

  let show = function () {}
  let hide = function () {}

  return {
    show,
    hide
  }

})()

export default dialog

main.js

import dialog from 'dialog.js'
Vue.prototype.$dialog = dialog

组件

this.$dialog.show()

#####9. 路由懒加载
解决首次加载速度慢的问题

router.js

let index = resolve => require(['@/components/index'], resolve)

routes: [
  {
    path: '/index',
    component: index
  }
]

#####10. 动态添加状态
组件

// 正确做法
this.$set(this, phone, '')

// 错误做法，会导致该状态无法实现双向绑定
this.data.phone = ''

#####11. 如何使用scss

1. 安装依赖

npm install sass-loader node-sass --save-dev

2. 组件中

<style scoped lang="scss"></style>

#####12. 动态改变title
router.js

routes: [
  {
    path: '/index',
    component: index,
    meta: {
      title: '主页'  
    }
  },
  {
    path: '/about',
    component: about,
    meta: {
      title: '关于'  
    }
  }
]

main.js

import router from './router'

router.beforeEach((to, from, next) => {
  let title = to.meta.title;
  title && (document.title = to.meta.title);
  next();
})