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
  }