Vue-cli 2.0使用遇到的问题记录

目录

1. Vue-cli 打包后vendor很大

2. Vue-Router使用History

3. Vue Router使用history模式带参数刷新报错

4. 路由变化页面数据不刷新

5. 异步回调函数中使用this无法指向vue实例对象

6. setInterval路由跳转继续运行并没有及时进行销毁

7. 修改数组视图无法更新

8. 修改数组视图无法更新

9. 使用Vue-cli打包，生成index.html文件无法直接打开

10. 打包后打开页面图片路径错误

11. 解决跨域问题

---

 

1. Vue-cli 打包后vendor很大

• 现象：

Vue-cli 打包后vendor很大，导致首次加载页面速度很慢

• 解决方法：链接

 

2. Vue-Router使用History

• 需求：

去除Vue URL中的“#” 

• 解决方法：

Vue Router的mode默认为‘hash’，改为‘history’

export default new Router({
  mode: 'history',
  routes: []
})

部署到服务器上刷新报错，404 Not Found

• 解决方案：

nginx设置try_files指令，如果当前的URL找不到就调用rewrites模块重写url

server {
    listen      80;
    server_name  localhost;

    location / {
        root   /home/web;
        try_files $uri $uri/ /index.html;
    }
}

 

3. Vue Router使用history模式带参数刷新报错

• 现象：

继问题2之后，部署到服务器上刷新正常，带参数刷新报错

• 解决方法：链接

 

4. 路由变化页面数据不刷新

• 原因：

依赖路由的params参数获取写在created生命周期里面,因为路由懒加载的关系，退出页面再进入另一个文章页面并不会运行created组件生命周期,导致文章数据还是第一次进入的数据

• 解决方法：watch监听路由是否变化

watch: {
  '$route' (to, from) { //监听路由是否变化
    if(this.$route.params.Id){// 判断条件  判断传递值的变化
      //获取数据
    }
  }
}

 

5. 异步回调函数中使用this无法指向vue实例对象

• 现象：

setTimeout、setInterval、ajax、Promise等中的this无法指向vue实例对象

• 解决方法：使用变量赋值或者箭头函数

//变量赋值
let _this = this;   
setTimeout(function () {  
    console.log(_this);
},1000);

//箭头函数访问
setTimeout(() => { 
   console.log(this);
}, 1000);

 

6. setInterval路由跳转继续运行并没有及时进行销毁

• 现象：

路由跳转之后，组件已经销毁，但是setInterval循环调用还没有销毁，一直在调用

• 解决办法：在组件生命周期beforeDestroy停止setInterval

//组件销毁前调用的钩子函数
beforeDestroy(){
    //需要在setInterval时赋值给this实例
    clearInterval(this.intervalId);
},

 

7. 修改数组视图无法更新

• 原因： 

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

• 官方文档：官方文档
• 解决方法：

Vue.$set(vm.items, indexOfItem, newValue)
//或
vm.items.splice(indexOfItem, 1, newValue)

 

8. 修改数组视图无法更新

• 需求： 

进入某个页面获取模默认信息，但有时需要传递一个id获取对应的信息，为了兼容同一个页面的路由的参数，可传可不传

• 解决方法：

//router配置
{
    path: '/index/:id?', //获取参数：this.$route.params.id
    name: 'index',
    component: Index
}

 

9. 使用Vue-cli打包，生成index.html文件无法直接打开

• 现象：

使用Vue-cli打包，生成index.html文件无法使用浏览器打开（部署到服务器上正常）

• 解决方法：

在webpack.prod.conf.js文件中的webpackConfig找到output，添加一项 publicPath: './'

 

10. 打包后打开页面图片路径错误

• 现象：图片请求失败，请求的路径是这样的

• 链接： 链接
• 解决方法：

修改build下的utils.js文件

if (options.extract) {
    return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',
        fallback: 'vue-style-loader'
    })
...

11. 解决跨域问题

• 链接：链接
• 解决方法：

1.Vue修改config目录下的index.js文件

module.exports = {
  dev: {
    proxyTable: {
      '/api': {         //修改后的请求接口
        target: 'http://www.*****.com/', //后端接口地址
        changeOrigin: true, //是否允许跨越
        pathRewrite: {
          '^/api': '/', //重写,
        }
      },
    },
  }
}

原本http://www.*****.com/login的接口，直接改为/api/login

2.部署到服务器，nginx解决跨域

server {
    listen      80;
    server_name  localhost;

    location / {
        root   /home/web;
        try_files $uri $uri/ /index.html;
    }
    location /api {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://www.*****.com/;
    }
}