Vue项目中遇到的问题汇总

一、打包后的打开index.html页面空白的几种情况:

  1. 引入的css、js路径报错,此时解决方法:把vue.config.js中的增加publicPath: ‘./’ 或者把原来的baseUrl改为publicPath,在vue-cli3.3以上废弃了baseUrl,更改为publicPath.
  2. router.js中的mode,如果为history模式的话需要服务器配置(该模式去掉链接的#);也可以把history换成mode模式(即为默认),此时的链接是带有#的(可以参考链接:https://router.vuejs.org/zh/guide/essentials/history-mode.html
  3. 浏览器不支持vue,需要把es6、es7语法转换为es5语法。(安装babel-polyfill,在main.js中引入babel-polyfill:import 'babel-polyfill')

二、在项目中的this指向问题:

setTimeout(() => { 
       console.log(this); // 此时的this指向window
}, 500);

 解决方法: 

//使用变量访问this实例
let self=this;
setTimeout(function () {  
     console.log(self); // 使用self变量访问this实例
},1000);

三、vue中的跨域(设置代理)

在vue.config.js中

module.exports = {
    devServer: {
        open: true,
        host: '0.0.0.0',
        port: 8808,
        proxy: {
          '/api': {
              target: '', //对应自己的接口
              changeOrigin: true,
              ws: false,
              pathRewrite: {
                  '^/api': ''
              }
          }
        }
    }
};

  

  

猜你喜欢

转载自www.cnblogs.com/zaijin-yang/p/12012147.html