工作总结vue篇

vue项目中碰到的一些问题

1. 项目引入ssr之后，刷新页面404

解决方法：

引入koa2-connect-history-api-fallback插件

配置示例：

const historyApiFallback = require('koa2-connect-history-api-fallback');

app.use(historyApiFallback({ whiteList: ['/api'] }));

2. vue组件懒加载，减小首页main.bundle.js的大小

解决方法：

(1) es提案的import()

vue-router配置路由懒加载，代码如下：

• // 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
  const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
  

(2) vue异步组件技术

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require(['../components/PromiseDemo'], resolve)
}

3. 某项操作之后立即刷新页面

• 用vue-router重新路由到当前页面，页面是不进行刷新的
• 采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好

解决方法：

子组件向父组件传递状态，使用provide和inject，注入数据去刷新页面

使用provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

App.vue

声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载

tableList.vue

在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加）,直接this.reload()调用，即可刷新当前页面。

4.有的样式打包之后被删除，如多行省略的样式失效-webkit-box-orient

这是webkit的坑，autoprefixer把过时的样式删除了所导致。

解决方法：

为保留的样式前后设置注释autoprefixer开关，保留样式就可以了。

注意：如果webpack中配置了删除注释的插件，则以上方法会不起作用。需修改autoprefixer的配置。

5.离开前页面有定时器未清除

解决方法：

用vue的组件内导航守卫beforeRouteLeave来清除，或销毁组件时清除。

6.传输密码时需要对密码进行加密

解决方法：

用JSEncrypt生成公钥对密码进行加密。

7.某些页面需要登录状态下才可以访问，未登录直接跳转去login页

解决方法：

可以借助路由的元信息meta，结合vuex，token赋值给store，在过路由守卫时检测该路由的meta是否需要登录。做路由拦截。

8.切换页面时让窗口回到页面顶部

解决方法：

用window.scollTo(0, 0)。

9.vue做多页应用时nginx路径配置404

解决方法：

nginx在配置路径时要把路径和vue-router的base相匹配。

10.h5页面一人一票功能实现

解决方法：

根据cookie来判断，针对投过票的用户，服务器set-cookie，不能再参与投票

11.代码结构优化

• 干掉if…else语句和switch语句，用三元表达式、短路表达式或对象（字典数据结构）去代替。
• 干掉for循环，用map、filter等高阶函数，或函数式编程代替（递归）。
• 多用解构赋值，优化函数传参，优化多变量的赋值，减少重复代码量。
• 用async/await去处理异步请求，代替promise

12.windows下无法设置环境变量

环境变量是nodejs语言的一种变量，在node中，有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量，在webpack中它的用途是判断生产环境或开发环境的依据的。

环境变量的作用是旨在我们进行工程化便已打包时可以对各种命令进行定制化的配置，比如要求某个命令在development下执行，就可以配置NODE_ENV=development，并且可以自己定义环境变量的内容。可以结合vue-cli去分析。

安装cross-env插件，在package.json中去配置增加cross-env。

如：

'analyz': 'cross-env NODE_ENV=production npm_config_report=true npm run build';

此处在执行命令前，设置了两个环境变量

**拓展：**DefinePlugin允许我们创建全局变量，可以在编译时进行设置，因此我们可以使用该属性来设置全局变量来区分开发环境和正式环境。这就是 DefinePlugin的基本功能。因此我们可以在webpack.config.js 中添加如下代码配置全局变量信息。

module.exports = {
    plugins: [
      // 设置环境变量信息
        new webpack.DefinePlugin({
            PRODUCTION: JSON.stringify(true),
            VERSION: JSON.stringify('5fa3b9'),
            BROWSER_SUPPORTS_HTML5: true,
            TWO: '1+1',
            'typeof window': JSON.stringify('object'),
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        })
    ]
};

13.从webpack3升级到webpack4

异同：

1、webpack4不需要定义入口点：它会将./src/index.js作为默认值

2、去除了 CommonsChunkPlugin

3、压缩方式升级到 UglifyJS2

4、支持 JSON 和 Tree Shaking

14.vue路由之间传递参数

两种方式：

1、query：支持path传递，在url后面显示参数与值

2、params：支持name方式传递，不显示参数与值

注意：query传参，刷新页面不会丢失参数。但是params会丢参。

15.vue缓存页面

解决方案：

给router-view包裹keep-alive，开启缓存。

给需要缓存的页面增加meta路由元信息来控制页面的缓存。

可以进一步用beforeRouterLeave(to, from, next)来灵活控制将要访问的页面是否需要缓存数据。

16.有的插件在服务端渲染中报navigator is not defined错误

原因分两种情况：

一、有的插件使用了浏览器的api，在服务端渲染时无法识别，需要用异步加载的方式：

这个时候不能再用import导入，需要使用require，

let hello
if (typeof window !== 'undefined') {
	hello = require('hello')
}

二、有的插件优先依赖于其它插件，比如bootstrap依赖于jquery

这时将jquery在编译时就用webpack暴露到全局，如：

new webpack.ProvidePlugin({
    $ : "jquery",
    jQuery : "jquery",
    "window.jQuery" :"jquery"
})

17.静态资源放到cdn上，若cdn挂了的问题

使用下面这行代码轻松解决：

如果挂掉了，那么就要在后面引入自己的本地资源库。

18.搜索功能模糊查询

使用watch监听属性，监听输入，配合节流函数，并且可以在得到结果前，设置中间状态。

19.vue缓存页面后，需要删除已缓存的页面

解决方案：

可以在路由的leave生命周期或该组件的deactive生命周期中，使用this.$destroy。销魂这个已缓存的组件。但是这样有个缺点，这个组件销毁后将不会再被缓存。

所以可以在keep-alive上的include动态bind一个数组，用vuex来动态改变该数组，表示你当前需要缓存的component。用beforeRouterLeave来动态控制缓存哪个页面