5.19 vue路由懒加载，vconsole移动端调式，eslint取消方式，移动端抓包Charies/Fiddler，Vue2.0/3.0环境变量配置

1、Vue路由懒加载几种写法（功能一样）

const Recommend = (resolve) => {
  import('components/recommend/recommend').then(module => {
    resolve(module)
  })
}
// 在routes中
// 1、异步组件实现懒加载（模块Promise法，风格优雅）
{
  path: '/recommend',
  component: Recommend
},
// 2、vue异步组件技术实现懒加载
{
  path: '/singer',
  component: resolve => require(['components/singer/singer'], resolve)
},
// 3、最新es6 import写法
{
  path: '/rank',
  component: () => import('components/rank/rank')
}

第3种写法还可以支持按组分块。（建议使用）

  component: () => import(/* webpackChunkName: "group-foo" */ 'components/rank/rank')

懒加载前：

懒加载后：

整体节约60KB大小。

文章:
Webpack的Code Splitting实现按需加载

2、手机端呼出console.log可以安装vconsole开源插件

npm i vconsole -D
// 在main.js文件中
import Vconsole from 'vconsole'
const vConsole = new Vconsole()
Vue.use(vConsole)

3、关闭eslint几种方式(vue-cli 2.0+)
第一种：暴力关闭eslint，在build/webpack.base.conf.js中找到module{ rules:} 直接注释
第二种：修改配置文件，在根路径，eslintrc.js中找到rules关闭指定检测语法
第三种：规避eslint语法检查，在按需行或文件处。

/* eslint-disable no-unused-vars */
import vConsole from 'vconsole'

第四种：vue-cli3.0模式vue.config.js中module.exports = {
lintOnSave: false}

4、移动端抓包工具Charies/Fiddler
前者是mac系统，后者是windows
略…

5.1、 Vue-cli2.0的环境变量配置是在config/dev.env或prod.env

注：a、环境变量可以自己添加，但是一定要单引号包裹双引号才能被webpack正确编译。b、dev.env或prod.env的修改实质是修改build下webpack.dev/prod.conf.js中的webpack.DefinePlugin路径

// 通过模板字符串，或者引用的方式使用。
  const url = `${process.env.VUE_APP_BASE_URL}/api/getSongList`

5.2、 Vue-cli3.0的环境变量配置是在根目录.env.development或者.env.production，直接配置环境变量即可。webpack会自动解析。

// 比如在.env.development文件中，无需引号，直接配置。
VUE_APP_RES_URL = http://localhost:8081
VUE_APP_EPUB_URL = http://localhost:8081/epub