vue-cli 3 問題記錄

1.vscode代碼美化（prettier + eslint）

安裝prettier - Code formatter 和 ESLint

首選項-->設置-->setting.json 設置

// #每次保存的時候將代碼按eslint格式進行修復
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "prettier.eslintIntegration": true

2.檢查代碼報錯【Parsing error: invalid-first-character-of-tag-name (vue/no-parsing-error)】：頁面{{ xxx < yyy }} 使用小於號進行判斷 。將< 改爲&lt;  同理> 改爲&gt;

3.同一項目多域名，本地運行，跨域配置

vue.config.js

const host1 = "http://p.zzz.cn"; // 域名1
const host2 = "https://sss.taobao.com"; // 域名2
const host3 = "https://mmm.taobao.com"; // 域名3

module.exports = {
    devServer: {
        proxy: {
          "/api/xx/index": {
            target: host1,
            changeOrigin: true,
            pathRewrite: {
              "^/api": "/"
            }
          },
          "/api/xx/order": {
            target: host2,
            changeOrigin: true,
            pathRewrite: {
              "^/api": "/"
            }
          },
          "/api/xx/mtop.taobao.yy": {
            target: host3,
            changeOrigin: true,
            pathRewrite: {
              "^/api": "/"
            }
          }
        }
    }
} 

注:使用axios時 不要配置基礎路徑--> // axios.defaults.baseURL="";

main.js內可使用Vue.prototy.BASE_URL_1 = data.BASE_URL_BASE_URL1;設置全局變量

【data】：此處爲我請求的本地json配置文件的返回值，裏面放置的是接口路徑

/** config.json 在public文件內

 * API_URL裏面的url爲本機ip
 * BASE_URL裏面的url爲線上地址
   因爲此處爲未配置不同環境打包命令，只是方便本地寫代碼，所以在最後上傳到服務器的時候，
建議把配置文件裏面的路徑都改爲一樣的，不然請求的仍然是本地路徑
 */

let startApp = function() {
  get("/config.json").then(res => {
    let data = res.data;
    if (process.env === "production") {
      Vue.prototype.BASE_URL_1 = data.BASE_URL.BASE_URL_1;
      Vue.prototype.BASE_URL_2 = data.BASE_URL.BASE_URL_2;
      Vue.prototype.BASE_URL_3 = data.BASE_URL.BASE_URL_3;
    } else {
      Vue.prototype.BASE_URL_1 = data.API_URL.BASE_URL_1;
      Vue.prototype.BASE_URL_2 = data.API_URL.BASE_URL_2;
      Vue.prototype.BASE_URL_3 = data.API_URL.BASE_URL_3;
    }
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount("#app");
  });
};

請求時this.$get(this.BASE_URL_1+"/xx/index")

4.自定義Cookie過期時間：【當天23:59:59過期】

import Cookies from "js-cookie";
const getDate = () => {
  const d = new Date();
  const year = d.getFullYear();
  const month = d.getMonth() + 1;
  const date = d.getDate();
  let str = year + "-" + month + "-" + date + " 23:59:59";
  let resStr = new Date(new Date(str).getTime());
  return resStr;
};
const cookieExpires = getDate();

export const setToken = (key, token) => {
  Cookies.set(key, token, { expires: cookieExpires });
};
export const getToken = key => {
  const token = Cookies.get(key);
  if (token) return token;
  else return false;
};
export const removeToken = key => {
  Cookies.remove(key);
};

// 使用 在需要的頁面用 import { setToken, getToken } from "路徑";引入
// setToken("lby", "是最帥的！"); 過期時間爲當天23:59:59