vue项目接近尾声，记录一下项目遇到的坑，总结一些经验和大家分享，初来乍到，请大家多多指教，友善相处，共同进步~

过滤器filter

假设由于产品需要或者设计个性，页面上的时间这里显示时分秒，那里显示年月日，如何高效写你的代码？ 嗯，这里就用到我们的filter

第一步新建filter.js，处理各种时间类型 第二步在main.js中引入

第三步在页面上使用

<p>{{row.updateTime | timeFilterYMDHMS }}</p>

融会贯通一下，除了时间，还可以处理金钱、距离等等

webpack的require.context

看一下你导入路由的js，是不是也像我的一样冗长且易出错？ 如果是，不妨用require.context来优化一下，感受一下优化后的代码：

const context = require.context("@/pages", true, /router.js$/);
let children = []
context.keys().forEach(key => {
  if (Array.isArray(context(key).default)) {
    children = children.concat(context(key).default)
  }
});

require.context主要用于自动化导入模块。认真看一下你的vue项目，除了路由这里，组件导入是不是也可以用到require.context来自动化？

使用mixins优化代码

一句话解释，Vue.mixin() 可以把你创建的自定义方法混入所有的 Vue 实例 示例代码

Vue.mixin({
  created: function(){
  	console.log("success")
  }
})

跑起你的项目，你会发现在控制台输出了一坨 success... 于是现在来了一个需求，当页面滚动的时候，表格随着滚动，当表格头部快消失时，固定表头在顶部。于是你监听页面滚动事件，设置表格头部固定，嗯，效果是实现了，回头看看，所有组件都有这些代码，那能不能只写一份代码呢？mixins来了~

// scroll-mixins.js
export default function(config) {
  // config接收.vue使用时的传参
  let { className="" } = config
  return {
    mounted() {
      document.querySelector('.el-main').addEventListener('scroll', this.scroll)
    },
    destroyed() {
      document.querySelector('.el-main') && document.querySelector('.el-main').removeEventListener('scroll', this.scroll)
    },
    activated() {
      this.scroll()
    },
    methods: {
      // 表格滚动，表格头部粘粘
      scroll() {
        // todo 你的代码
      }
    }
  }
}

然后在.vue文件中导入

import Mixin from '@/mixins/scroll-mixins';
let mixin = new Mixin({
    className: "settled-pay-table",
})
export default {
  computed: {
    ......
  },
  mixins: [mixin],
  methods: {
  }
 }

vue-cli3.0配置多页面的坑点

配置多页面

假设项目中需要将登录页面作为一个入口文件

第一步 在项目public文件夹下创建一个login.html，我是将index.html复制一份

第二步 在项目中新建关于login文件夹下的main.js(参照index的main.js)、router.js(参照index的router.js)和vue文件(参照index的App.vue文件)

第三步 在vue.config.js的module.exports中添加入口配置

pages: {
    index: {
      entry: 'src/main.js',
      title: process.env.VUE_APP_TITLE,
      // 模板来源
      template: `public/index.html`,
    },
    login: {
      entry: 'src/pages/login/build/main.js',
      title: '用户登录',
      // 模板来源
      template: `public/login.html`,
    },
  }

运行打包，完全没有问题，一天工资又到手了，哈哈哈~别着急，认真看一下坑。。。

坑1：打包后的login.html中混入了全局的依赖文件，超大的js和css文件，sad...

看看打包后的login.html 引入这么多和login无关的js和css？？？感觉问题没有这么简单。怎么配置才能实现各个页面打包自身所需要的chunks？于是找到了splitChunks， 在vue.config.js的module.exports中添加

chainWebpack: config => {
    config.optimization.splitChunks({
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          minChunks: 4,
          test: /node_modules/,
          priority: -10,
          chunks: 'initial'
        },
        common: {}
      }
    });
  }

再打包看看，完美~~ （有对splitChunks敢兴趣的可以去webpack官网认真看一下）

坑2：入口配置必须和路由匹配

有一天需求又要加一个关于地图的页面。哈哈哈，这题我会~

vue.config.js的配置

pages: {
    index: {
      entry: 'src/main.js',
      title: process.env.VUE_APP_TITLE,
      // 模板来源
      template: `public/index.html`,
    },
    login: {
      entry: 'src/pages/login/build/main.js',
      title: '用户登录',
      // 模板来源
      template: `public/login.html`,
    },
    map: {
      entry: 'src/pages/map/main.js',
      // 模板来源
      template: `public/map.html`,
    },
  },

添加main.js、router.js和vue文件 一顿操作猛如虎，一看页面是空白。懵逼一会，找到根源，在我的router.js文件中

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL
});

router.addRoutes([
  {
    name: 'h5Map',
    path: '/app/h5Map',
    component: resolve => require(['@/pages/map/h5Map.vue'], resolve)
  },
]);
export default router;

把这个path的'/app/h5Map'改成'/map/h5Map'，页面出来了

Vue Cli 3.0实现打包后直接访问

默认情况下，使用npm run build打包后的html无法直接访问，但是有时需临时打开前端项目(比如领导就是要一个可以本地打开的页面...)

实现

• 1.确保vue-router模式为hash 模式
• 2.修改vue.config.js中publicPath为 './ ' 即可
• 3.若index.html有文件的引用，修改为正确的（相对）路径即可 （vue.config.js里不能配置多页面，不然是空白）

文章接近尾声，看完有没有受到启发呢？编程之路，愿大家，志存高远，心贵平常！

小声嘀咕：写字好累啊，走过路过可否给小妹一个赞呀，好想要掘金的礼物、捂脸 :)