Vue错误总结

• 打包后，浏览器浏览index.html文件空白，或者无法跳转。
  • 解决办法：

  // 主要原因时由于打包后的文件路径错误,在项目目录下建一个vue.config.js文件
  // 进行如下设置
  module.exports = {
      publicPath:'./'  // 设置打包后文件的引用路径为相对于dist目录下的文件
  }
  

• 安装vue-cli后不能使用vue ui命令
  vue : 无法加载文件 D:\Node\node_global\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.co m/fwlink/?LinkID=135170 中的 about_Execution_Policies。
  • 解决办法：
    在vue-cli安装目录中找到vue.ps1文件并删除
• 请求数据时发生跨域问题
  Access to XMLHttpRequest at 'http://v.juhe.cn/weather/index?format=2&cityname=%E8%B4%B5%E9%98%B3&key=dadafafdas' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  • 解决办法1：

  // 1.在项目根目录上创建`vue.config.js`文件,内容如下
  // 这个方法只在开发环境下生效
  module.exports = {
      devServer: {   
        proxy: {
          '/api': {
            target: 'http://v.juhe.cn/', // 请求的地址域名
            ws: true,
            changeOrigin:true,
            pathRewrite: { 
              '^/api': '/' //路径重写 如果请求地址http://v.juhe.cn/weather/index，则发送请求时的地址需要改写为'/api/weather/index'
              }
          },
        }
      }
  }		
  

  • 解决方法2：

  //1. npm install axios-jsonp安装axios-jsonp
  //2. 直接使用axios插件发送请求
  // 要将http转换为https
  import axios  from 'axios';
  import jsonpAdapter from 'axios-jsonp';
   
  axios({
      url: '请求地址',
      adapter: jsonpAdapter,
      callbackParamName: 'callback' // optional, 'callback' by default
  }).then((res) => {
   	cons.log(res)
  });
  

  • 解决方法3：

  //  1. 自定义jsonp
  function jsonp(url)  {
      if(!url){
          console.error('Axios.JSONP 至少需要一个url参数!')
          return;
      }
      return new Promise((resolve) => {
          window.jsonCallBack =(result) => {
              resolve(result)
          }
          var JSONP=document.createElement("script");
          JSONP.type="text/javascript";
          JSONP.src=`${url}&callback=jsonCallBack`;
          document.getElementsByTagName("head")[0].appendChild(JSONP);
          setTimeout(() => {
              document.getElementsByTagName("head")[0].removeChild(JSONP)
          },500)
      })
  }
  //  导出jsonp
  export default jsonp;
  

  // 2. 请求获取数据
  // 导入jsonp
  import jsonp from '../jsonp.js'
  // 使用
  // 要将http转换为https
  jsonp(url).then((res)=>{ // url是请求地址
      console.log("res",res)
  })
  

• vue打包运行后产生Network: unavailable，局域网无法访问
  • 解决，在vue.config.js中配置

  devServer: {
      host: '192.167.0.3',// ip地址
      hot: true,
      disableHostCheck: true
  }