vue-cli4配置

1.设置端口号及浏览器是否自动打开

vue.config.js加入devServer

const webpack = require('webpack')
module.exports = {
  devServer: {
    port: 8085, // 端口号
    host: 'localhost',
    https: false,
    open: true // 配置是否自动启动浏览器
  },
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery"
      })
    ]
  }
}

2.配置eslint忽略

eslint常常会有很严格的代码规范，如果太麻烦或者有老代码的话，可以使用.eslintignore和.eslintrc.js文件进行忽略

2.1配置文件或文件夹整体忽略

.eslintignore

/dist/
*.js

2.2配置规则忽略

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    jquery:true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    /**
     * 这里的数字：0表示不不处理，1表示警告，2表示错误
     * */

    "no-trailing-spaces": 0,//一行结束后面不要有空格
    "no-multiple-empty-lines": 0,//不能有空行
    "brace-style": 0, // if while function 后面的{必须与if在同一行，java风格。
    "indent": 0,//缩进风格
    "padded-blocks": 0,// 块语句内行首行尾是否要空行,首位空行开启规则则为非法
    "keyword-spacing": 0, //关键字是否需要带空格，if(L < 0)开启规则则为非法,需要在if后加上空格if (L < 0)
    "space-in-parens": 0,//小括号里面要不要有空格 if ( L < 0 )开启规则则为非法,需要去除空格if (L < 0)
    "space-infix-ops": 0,//中缀操作符周围要不要有空格,let a=null;开启规则则为非法,需要在=前后加空格let a = null;
    "space-before-blocks": 0,//不以新行开始的块{前面要不要有空格function a (){}开启规则则为非法,需要在{前加空格function a () {}
    "space-before-function-paren": 0,//函数定义时括号(前面要不要有空格,function a(){}开启规则则为非法,需要在括号(前加空格function a (){}
    "spaced-comment": 0,//注释符号后是否需要空格 //test 和/*test*/开启规则则为非法，需要加上空格// test 和/* test */
    "comma-dangle": 0, // 数组和对象键值对最后一个逗号 {a:1, b:2,}开启规则则为非法，需要去除最后一个逗号{a:1, b:2}
    "object-curly-spacing": 0, // 大括号内是否需要前后空格 {a:1,b:2}开启规则则为非法，大括号内前后需要加上空格{ a:1,b:2 }
    "standard/object-curly-even-spacing": 0, // 大括号内是否可以奇数个空格需要前后空格 { a:1,b:2}开启规则则为非法，大括号加上或去掉一个空格{ a:1,b:2 }或{a:1,b:2}
    "vue/no-use-v-if-with-v-for": 0, // 去除不能同时使用v-for和v-if的警告
    "vue/require-v-for-key": 0, // v-for语句中是否必须要有key
    "comma-spacing": 0, // 控制逗号前后的空格 {a:1,b:0}开启规则则为非法，逗号之后需要控告{a:1, b:0}
    "key-spacing": 0,//对象字面量中冒号的前后空格{a:1}开启规则则为非法，冒号之后需要空格{a: 1}
    "no-unused-vars": 0, // 不能有声明后未被使用的变量或参数，开启规则则后，定义变量后不使用为非法
    "semi": 0, //语句结尾不需要分号结尾，let a = null;开启规则则后非法,需要去除分号
    'quotes': 0, //是否限制引号类型
    "no-multi-spaces": 0,//不能用多余的空格
    'no-console': 0,
    'no-debugger': 0,
    "no-irregular-whitespace": 0
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

3.配置全局变量或者函数

3.1使用js文件实现全局函数或全局对象（/api/global.js）

export default {
  install (Vue, options) {
     /**
     * 系统信息
     * onlineTime 系统上线时间报警提示信息
     * timesColor 柱状图时间段颜色，工作时间、加班时间、非工作时间
     * */
    Vue.prototype.system = {
      onlineTime: "2019/08/20",
      serverUrl: "http://202.38.213.106:8086/suct",
      startYear: 2017,
      postDataDate: "2018",
      projectId: "00006",
    };
    /**
     * 获取每月的天数
     * */
    Vue.prototype.mGetDate = function (year, month) {
      var d = new Date(year, month, 0);
      return d.getDate();
    }
  }
}

3.2.main.js引入

import base from './api/global'
Vue.use(base)

3.3使用

在模板中使用

<template>
  <div>
    {{system.onlineTime}}
  </div>
</template>

js代码中使用

this.mGetDate(2019,8)

4.使用动态路由

解决使用动态路由时，页面刷新路由丢失问题

4.1将路由数据存入sessionStorage

sessionStorage.setItem("privilege", JSON.stringify(privilegeArr));

4.2 刷新时获取路由数据，重载路由

在重载路由时同时可以判断token及登录超时

main.js

let data = JSON.parse(sessionStorage.getItem('privilege')); //登陆并获取了权限
let fristLoginDate = sessionStorage.getItem('date'); //上次登录时间戳，用于超时判断
if (data){
  //这里是防止用户手动刷新页面，整个app要重新加载,动态新增的路由，会消失，所以我们重新add一次

  let cDate =  Date.parse(new Date()); //当前时间戳
  let timeout = 1000 * 60 * 60 * 24; /*超时时间*/
  if( (cDate - Number(fristLoginDate)) > timeout){
    router.push({path:"/logout"});
  }else{
    let routes = []
    MenuUtils(routes,data)
    router.addRoutes(routes)
  }
}
else{
  router.push({path:"/logout"});
}

router.beforeEach((route, redirect, next) => {
  let data = (sessionStorage.getItem('token'));

 if (!data && route.path !== '/login') {
    next({ path: '/logout' })
  } else {
    if (route.path) {
      next()
    } else {
      next({ path: '/logout' })
    }
  }
})

5.打包配置

配置输出文件夹及资源文件夹

vue.config

outputDir: 'dist', // 输出文件目录
assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

其中assetsDir是否配置的差别如下：

配置前

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oAB2Qmlw-1575877421814)(index_files/f73d58f2-6f5c-4c93-a7ae-00bdcd66872a.png)]

配置后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sW5y2S6f-1575877421816)(index_files/48ecbd28-ada4-4630-9f5f-610df044e9a5.png)]

6.配置loader

需要使用页面打开pdf文件，又不想使用pdfjs时，可以通过配置url-loader来实现

6.1使用chainWebpack

vue.config

const webpack = require('webpack')
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/threeTest/" : "/",
  outputDir: 'dist', // 输出文件目录
  assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  devServer: {
    port: 8080, // 端口号
  https: false,
  open: true // 配置是否自动启动浏览器
  },
  lintOnSave: process.env.NODE_ENV !== 'production',
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
  		jQuery: "jquery",
  		"windows.jQuery": "jquery"
 	  })
    ]
  },

  // 配置pdf rule
  chainWebpack:config => {
    config.module
  		.rule('pdf')
      	.test(/\.(pdf|PDF)(\?.*)?$/)
      	.use('url-loader')
        	.loader('url-loader')
        	.tap(options => {
          		// 修改它的选项...
  				return {
             		limit: 10000,
  					fallback: {
               			loader: 'file-loader',
  						options: {
                 			name: 'static/pdf/[name].[hash:8].[ext]'
  						}
             		}
           	}
      	 })
        .end()
  }
}

6.2查看是否配置成功

控制台输入命令 vue inspect > output.js 拿到解析好的 webpack 配置
打开 output.js文件查看是否配置成功

/* config.module.rule('pdf') */
{
  test: /\.(pdf|PDF)(\?.*)?$/,
  use: [
    {
      loader: 'url-loader',
  		options: {
        limit: 10000,
  		fallback: {
          loader: 'file-loader',
  		  options: {
            name: 'static/pdf/[name].[hash:8].[ext]'
  		  }
        }
      }
    }
  ]
}