記錄vue的一些踩坑日記

安裝Jq

npm install jquery --save

vue列表跳轉(zhuǎn)到詳情頁(yè)，再返回列表的時(shí)候不刷新頁(yè)面并且保持原位置不變；

解決：使用keepAlive

1. 在需要被緩存的頁(yè)面的路由中添加：keepAlive: true,

 {
        path: '/viewExamine',
        name: 'viewExamine',
        component: () => import('@/views/viewExamine'),
        meta: {
          keepAlive: true, 
        },
      },

2. 記錄位置

const router = new VueRouter({
  // mode: 'history',
  mode: 'hash', //刷新之后找不到頁(yè)面用這個(gè)
  base: process.env.BASE_URL,
  routes,
  //記錄位置
  scrollBehavior: (to, from, savedPosition) => { 
    if (savedPosition) {     
      return savedPosition
    } else { 
      return { x: 0, y: 0 }
    }
  }
})

3. 在app.vue中：

<template>
  <div id="app" v-cloak>
    <!-- 可以被緩存的視圖組件 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 不可以被緩存的視圖組件 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view> 
  </div>
</template>

然后，就可以啦，問(wèn)題就解決了（返回列表頁(yè)不會(huì)觸發(fā)created）

vue退出登錄后,如何清空keep-alive緩存

問(wèn)題描述:在項(xiàng)目中,有個(gè)頁(yè)面用到了keep-alive。但是,當(dāng)我點(diǎn)擊退出登錄,切換了其他賬號(hào)登錄后,保留的還是上一個(gè)賬號(hào)的數(shù)據(jù)信息,最終采取了以下方法解決的。

原文：https://blog.csdn.net/weixin_50446072/article/details/125541134

代碼如下:(app.vue)

<template>
  <div id="app">
    <keep-alive v-if="isLoggedIn">
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive||!isLoggedIn"></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
    };
  },
  watch: {
    $route(to, from) {
      // if the route changes...
      let token = localStorage.getItem("court-token") || "";
      if (token) {
        // firebase returns null if user logged out
        this.isLoggedIn = true;
      } else {
        this.isLoggedIn = false;
      }
    },
  },
};
</script>

轉(zhuǎn)化時(shí)間戳

1. 過(guò)濾器

Vue.filter('dateFormat_sfm', time => {
  //年月日時(shí)分秒
  var now = new Date(time);
  var nian = now.getFullYear();
  var yue = (now.getMonth() + 1).toString().padStart(2, "0");
  var ri = now.getDate().toString().padStart(2, "0");
  var shi = now.getHours().toString().padStart(2, "0");
  var fen = now.getMinutes().toString().padStart(2, "0");
  var miao = now.getSeconds().toString().padStart(2, "0");
  if (time === undefined) {
    return ``;
  } else {
    return `${nian}-${yue}-${ri} ${shi}:${fen}:${miao}`; //
  }
})

2. mixin

1. npm install moment --save（如果想使用moment）
2. 在src下創(chuàng)建一個(gè)mixin文件夾 里面創(chuàng)建一個(gè)index.js

//import moment from 'moment'

const mixin = {
    methods: {
        getTimeSFM(time) {
            // if (time !== undefined) {
            //     return moment(time).format('YYYY-MM-DD HH:mm:ss')
            // } else {
            //     return ''
            // }
            //年月日時(shí)分秒
            var now = new Date(time);
            var nian = now.getFullYear();
            var yue = (now.getMonth() + 1).toString().padStart(2, "0");
            var ri = now.getDate().toString().padStart(2, "0");
            var shi = now.getHours().toString().padStart(2, "0");
            var fen = now.getMinutes().toString().padStart(2, "0");
            var miao = now.getSeconds().toString().padStart(2, "0");
            if (time === undefined) {
                return ``;
            } else {
                return `${nian}-${yue}-${ri} ${shi}:${fen}:${miao}`; //
            }
        },
        getTime(time) {

            // if (time !== undefined) {
            //     return moment(time).format('YYYY-MM-DD')
            // } else {
            //     return ''
            // }

            //年月日時(shí)分秒
            var now = new Date(time);
            var nian = now.getFullYear();
            var yue = (now.getMonth() + 1).toString().padStart(2, "0");
            var ri = now.getDate().toString().padStart(2, "0");
            var shi = now.getHours().toString().padStart(2, "0");
            var fen = now.getMinutes().toString().padStart(2, "0");
            var miao = now.getSeconds().toString().padStart(2, "0");
            if (time === undefined) {
                return ``;
            } else {
                return `${nian}-${yue}-${ri}`; //
            }
        }
    }
}
export default mixin

局部引入：(在需要用到的頁(yè)面）

• import mixin from “@/mixin/index”;
• mixins: [mixin],

全局引入：（main.js）

• import MiXin from ‘@/mixin/index’
• Vue.mixin(MiXin)

5. 可以直接使用在div里面： <div class="">領(lǐng)用日期：{{ getTime(item.useTime) }}</div>

解決編程式路由往同一地址跳轉(zhuǎn)時(shí)會(huì)報(bào)錯(cuò)的情況

//解決編程式路由往同一地址跳轉(zhuǎn)時(shí)會(huì)報(bào)錯(cuò)的情況
const originalPush = VueRouter.prototype.push;
const originalReplace = VueRouter.prototype.replace;
//push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject)
    return originalPush.call(this, location, onResolve, onReject);
  return originalPush.call(this, location).catch(err => err);
};
//replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
  if (onResolve || onReject)
    return originalReplace.call(this, location, onResolve, onReject);
  return originalReplace.call(this, location).catch(err => err);
};

多次打包之后：瀏覽器會(huì)有緩存

在 html 文件中加入 meta 標(biāo)簽，content 屬性設(shè)置為no-cache;

public/index.html

  <meta http-equiv="pragram" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="expires" content="0">

項(xiàng)目打包的時(shí)候給每個(gè)打包文件加上 hash 值，一般是在文件后面加上時(shí)間戳；

vue.config.js

const { defineConfig } = require('@vue/cli-service');
const Timestamp = new Date().getTime();
module.exports = defineConfig({
  //  在打包時(shí)取消生成.map文件
  //在開(kāi)發(fā)模式為true，有報(bào)錯(cuò)信息可以查看精確到行列(因?yàn)榇虬笏写a都打入一個(gè)js文件)
  productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,
  transpileDependencies: true,
  lintOnSave: true, //eslint，默認(rèn)是true
  publicPath: './',//因?yàn)閣ebpack不認(rèn)識(shí)@。 
  // 設(shè)置出口：解決打包緩存
  // 修改輸出js目錄名及文件名
  configureWebpack: {
    output: {
    //js表示在dist生成一個(gè)js文件夾
    //[name]自動(dòng)根據(jù)生成名字
    //[hash:6]打包之后會(huì)生成一個(gè)hash值. :6表示取hash前6位
    //[chunkhash]打包會(huì)生成一個(gè)chunkhash值，只有每次修改配置chunkhash才會(huì)變化
      filename: `js/[name].[chunkhash].${Timestamp}.js`,
      chunkFilename: `js/[name].[chunkhash].${Timestamp}.js`
    }
  },
  // 修改輸出css目錄名及文件名
  css: {
    extract: {
      filename: `css/[name].[chunkhash].${Timestamp}.css`,
      chunkFilename: `css/[name].[chunkhash].${Timestamp}.css`
    }
  }, 

打包之后的文件：每次生成的文件名稱(chēng)都是不一樣的

這是只設(shè)置了js文件名：

vue配置環(huán)境:開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境、正式環(huán)境

項(xiàng)目根目錄下新建文件：.env.development、.env.production、.env.test

NODE_ENV = 'development'。//是node的語(yǔ)言 process.env.NODE_ENV就可以訪問(wèn)到值
VUE_APP_MODE = 'development'// 在vue中 要寫(xiě)成VUE_APP開(kāi)頭并大些
VUE_APP_BASE_API =  window.apiURL;//這里:'http://xxx:8080'(你的開(kāi)發(fā)環(huán)境)

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_BASE_API = window.apiURL;//這里:'http://xxx:8080'(你的開(kāi)發(fā)環(huán)境)

???????NODE_ENV = 'test'
VUE_APP_MODE = 'test'
VUE_APP_BASE_API = window.apiURL;//這里:'http://xxx:8080'(你的開(kāi)發(fā)環(huán)境)

package.json中配置：

  "scripts": {
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "prod": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "build:prod": "vue-cli-service build --mode production", 
    "lint": "vue-cli-service lint"
  },

啟動(dòng)命令：

npm run serve;//開(kāi)發(fā)環(huán)境
npm run test;//測(cè)試環(huán)境
npm run prod;//正式環(huán)境

打包命令：

npm run build;//開(kāi)發(fā)環(huán)境
npm run build:test;//測(cè)試環(huán)境
npm run build:prod;//正式環(huán)境

window.apiURL:是獲取當(dāng)前項(xiàng)目啟動(dòng)的服務(wù)器的路徑+端口(場(chǎng)景：沒(méi)有固定的地址）

• 新建文件：public/index.js
  
• index.js

const apiURL = window.location.origin

• index.html中：

  <script type="text/javascript" src="<%= BASE_URL %>index.js"></script>
  <script>
    // 然后使用window對(duì)象
    window.apiURL = apiURL
  </script>

• utils/request.js

// 1.創(chuàng)建一個(gè)新的axios實(shí)例，設(shè)置基地址
const request = axios.create({
  // baseURL:process.env.VUE_APP_BASE_API + "/xxx",
  baseURL: window.apiURL + "/xxx", // 正式
  timeout: 10000
});

這樣的話，不管你的項(xiàng)目部署在那個(gè)地址下，都不用再改路徑和端口了。

Eslint：常見(jiàn)打包報(bào)錯(cuò)

• 注釋?zhuān)?/后面應(yīng)該有空格；
• Operator ‘===’ must be spaced 使用’= = =’ 而不是’= =’
• Import in body of module; reorder to top import/first：將所有的import擋在最前面；
• 使用 let/const 而不是var;

vue中使用params傳參，刷新頁(yè)面后params參數(shù)丟失解決方案

解決方案：

1. 配合sessionStorage實(shí)現(xiàn)刷新頁(yè)面后數(shù)據(jù)不丟失

(網(wǎng)上很多都是使用localStorage配合使用，但是有個(gè)問(wèn)題是將當(dāng)前頁(yè)面直接關(guān)閉了，重新進(jìn)來(lái)后localStorage還是存在的。而使用sessionStorage，頁(yè)面關(guān)閉后會(huì)自動(dòng)刪除)

export default {
	created(){
		   let paramsData = sessionStorage.getItem("paramsData");
		   let params;
	       if(paramsData){
	            params = JSON.parse(sessionStorage.getItem("paramsData"));
	        }else{
             	params = this.$route.params;
	            sessionStorage.setItem("paramsData", JSON.stringify(params));
	        }
	        this.params = params;
		},
	// 頁(yè)面銷(xiāo)毀之前
    beforeDestroy() {
        sessionStorage.removeItem('paramsData')
   	},
	}

2. 使用動(dòng)態(tài)路由

使用動(dòng)態(tài)路由，訪問(wèn)路由地址為：/vuew1/username/6110（感覺(jué)和query訪問(wèn)差不多，如果參數(shù)多點(diǎn)路由地址會(huì)顯得很長(zhǎng)，不大美觀。）
在router.js中設(shè)置路由

const routes = [
  {
    path: '/view1/:name/:idno',
    name: 'view1',
    component: () => import( '../admin/view1.vue')
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

頁(yè)面中使用

this.$router.push({name:'view1', params:{name:'張三', idno:'123123'}});
<router-link :to="{name:'view1', params: {name:'張三', idno:'123123'}}">跳轉(zhuǎn)</router-link>

標(biāo)題H5頁(yè)面（在移動(dòng)端）顯示控制臺(tái)

安裝 VConsole

npm install vconsole

使用VConsole
Vue2

imort Vue from 'vue'
import VConsole from 'vconsole';
const vconsole = new VConsole()
Vue.use(vconsole)

Vue3

import { createApp } from 'vue'
import App from '@/App/index.vue'
import VConsole from 'vconsole';
const app = createApp(App)
const vconsole = new VConsole() as any
app.use(vconsole ) 

拿到一個(gè)vue項(xiàng)目，怎么啟動(dòng)？

運(yùn)行別人的項(xiàng)目的前提準(zhǔn)備
1、刪除package-lock.json和node_modules 文件

package-lock.json記錄了整個(gè)node_moudles文件夾的樹(shù)狀結(jié)構(gòu)，還記錄了模塊的下載地址，但是它是基于項(xiàng)目作者的npm版本庫(kù)生成的，若不刪掉這個(gè)依賴(lài)文件，容易出現(xiàn)npm版本差異導(dǎo)致的報(bào)錯(cuò)。

2、進(jìn)入項(xiàng)目的終端

2.1 首先，進(jìn)入vue項(xiàng)目所在目錄（如下圖所示）
2.2 在當(dāng)前路徑框中輸入【cmd】，回車(chē)
2.3 清除npm緩存

3、npm有緩存時(shí)，常常出現(xiàn)安裝依賴(lài)不成功的現(xiàn)象，且一旦出現(xiàn)這個(gè)問(wèn)題，報(bào)錯(cuò)信息很完善，但根據(jù)報(bào)錯(cuò)信息一項(xiàng)一項(xiàng)去解決，卻死活解決不了，還找不出原因。控制臺(tái)輸入下面命令清除npm緩存，npm有緩存時(shí)，常常出現(xiàn)安裝依賴(lài)不成功的現(xiàn)象

npm cache clean -f

4、重新安裝依賴(lài)。

npm install

5、最后運(yùn)行項(xiàng)目。

npm run serve

6、成功

上述是理想情況（不出錯(cuò)）；

忘記截圖了，下圖和我的是一摸一樣滴，，，
報(bào)錯(cuò)大概是這樣

npm ERR! code 1 
npm ERR! path /Users/yc/Desktop/adminadmin-dmpc/node_modules/node-sass 
npm ERR! command failed 
npm ERR! command sh -c -- node scripts/build.js
npm ERR! Building: /usr/local/bin/node /Users/yc/Desktop/adminadmin-dmpc/node_modules/node-gyp/bin/node-gy
...

經(jīng)過(guò)一番苦苦搜索，終于知道上述情況是因?yàn)閚ode版本和scss版本不匹配，node版本過(guò)高的緣故，如何解決呢？

卸載 Node.js（https://www.php.cn/faq/533612.html）

在使用 Node.js 過(guò)程中，如果出現(xiàn)安裝不成功、版本不符、或出現(xiàn)其他問(wèn)題等，需要?jiǎng)h除已安裝的 Node.js，重新安裝新版本的 Node.js。此外，如果你需要使用其他的 JavaScript 開(kāi)發(fā)環(huán)境，就需要卸載 Node.js。

如何卸載 Node.js？

在 Mac 中卸載 Node.js，可以選擇以下兩種方法：

使用命令行卸載 Node.js
第一步：打開(kāi)終端，輸入以下命令顯示 Node.js 的安裝路徑：

which node

執(zhí)行該命令后，會(huì)顯示安裝路徑：/usr/local/bin/node

第二步：輸入以下命令刪除 Node.js 相關(guān)的文件：

sudo rm -rf /usr/local/bin/npm

sudo rm -rf /usr/local/share/man/man1/node.1

sudo rm -rf /usr/local/lib/dtrace/node.d

sudo rm -rf ~/.npm

sudo rm -rf ~/.node-gyp

sudo rm /usr/local/bin/node

該命令會(huì)刪除 Node.js 的可執(zhí)行文件、npm 包管理器、手冊(cè)頁(yè)、DTrace 跟蹤文件和用戶目錄下相關(guān)文件。

第三步：確定是否完全卸載 Node.js。在終端中輸入以下命令：

node -v

如果顯示“command not found”，則表示已經(jīng)卸載干凈。

下載Node（https://www.php.cn/faq/528329.html）

過(guò)官方網(wǎng)站下載指定版本的 Node.js

打開(kāi) Node.js 官方網(wǎng)站
在瀏覽器中輸入 https://nodejs.org/，打開(kāi) Node.js 的官方網(wǎng)站。

選擇下載版本
先去packjson.js里面查看node-sass版本，

然后對(duì)應(yīng)你要下載的node版本

這里我需要下載node13版本（Mac）

在官網(wǎng)首頁(yè)中，點(diǎn)擊 “Download” 按鈕，進(jìn)入下載頁(yè)面。在下載頁(yè)面中，我們可以選擇多種不同操作系統(tǒng)下的 Node.js 版本。

如果需要下載指定版本的 Node.js，可以在 “Previous Releases” 標(biāo)簽頁(yè)中找到我們需要的版本，點(diǎn)擊對(duì)應(yīng)的版本號(hào)即可進(jìn)入下載頁(yè)面。

下載并安裝 Node.js
在下載頁(yè)面中，可以選擇下載對(duì)應(yīng)版本的 Node.js 安裝程序進(jìn)行安裝。安裝完成后，可以在終端中執(zhí)行以下命令驗(yàn)證 Node.js 是否安裝成功：

node -v

node安裝好了，，，，，好累

然后再去執(zhí)行npm install就不會(huì)報(bào)錯(cuò)了。。。。

報(bào)錯(cuò)

Failed to compile with 2 errors                                                                                                                                                                            下午2:15:52

Syntax Error: TypeError: token.type.endsWith is not a function
Occurred while linting D:\workspace\tk\h5\project\game\src\game\spy\components\Badge\index.vue:17
    at Array.every (<anonymous>)
    at Array.forEach (<anonymous>)
    at Array.forEach (<anonymous>)
    at Array.map (<anonymous>)


Syntax Error: TypeError: token.type.endsWith is not a function
Occurred while linting D:\workspace\tk\h5\project\game\src\game\spy\components\Icon\index.vue:11
    at Array.every (<anonymous>)
    at Array.forEach (<anonymous>)
    at Array.forEach (<anonymous>)
    at Array.map (<anonymous>)


You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

您可以使用特殊注釋禁用某些警告。 
使用//eslint-disable next行可以忽略下一行。 
使用/*eslint-disable*/可以忽略文件中的所有警告。

修改方法：在vue.config.js中直接添加一行代碼即可：lintOnSave:false

module.exports = { 
  lintOnSave: false, // 關(guān)閉eslint
  }

“build:report”: “vue-cli-service build --report”,

vuex中this.$ store.commit和this.$store.dispatch的用法

參考文章

this.store.dispatch()與this.store.commit()方法的區(qū)別總的來(lái)說(shuō)他們只是存取方式的不同,兩個(gè)方法都是傳值給vuex的mutation改變state

區(qū)別
this.$store.commit()------同步操作

this.$store.commit('方法名',值)【存儲(chǔ)】

this.$store.state.方法名【取值】

this.$store.dispatch()------異步操作

this.$store.dispatch('方法名',值)【存儲(chǔ)】

this.$store.getters.方法名【取值】

當(dāng)操作行為中含有異步操作:
比如向后臺(tái)發(fā)送請(qǐng)求獲取數(shù)據(jù)，就需要使用action的dispatch去完成了。
其他使用commit即可。

• commit => mutations,用來(lái)觸發(fā)同步操作的方法。
• dispatch =>actions,用來(lái)觸發(fā)異步操作的方法。

在store中注冊(cè)了mutation和action，在組件中用dispatch調(diào)用action，然后action用commit調(diào)用mutation。

store/index.js文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-618608.html

import Vue from 'vue';
import Vuex from 'vuex';
import { setCookie, getCookie, removeCookie, os } from '@/utils';
import {  getUserPurse,  } from '@/api';

Vue.use(Vuex);

let expiresTime = 1 / 24;

const store = new Vuex.Store({
  state: { 
    app: null, 
    uid: getCookie('web_uid'),
    token: getCookie('token'),
    userInfo: {}, 
    purseInfo: null, // 錢(qián)包信息 
  },
  mutations: { 
    setUid(state, uid) {
      state.uid = uid;
      if (uid) {
        setCookie('web_uid', uid, os.app ? { expires: expiresTime } : undefined);
      } else {
        removeCookie('web_uid');
      }
    },
    setToken(state, token) {
      state.token = token;
      if (token) {
        setCookie('token', token, os.app ? { expires: expiresTime } : undefined);
      } else {
        removeCookie('token');
      }
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo;
    },
    setPurseInfo(state, purseInfo) {
      state.purseInfo = purseInfo;
    }, 
  },
  actions: { 
    logout({ commit }) { 
      commit('setUid', null);
      commit('setToken', null);
      commit('setUserInfo', {});
      commit('setPurseInfo', null); 
    },
     
    getUserPurse({ commit, state }, isUpdate) {
      return new Promise((resolve, reject) => {
        if (isUpdate || !state.purseInfo) {
          getUserPurse({
            data: {
              uid: state.uid,
              web_token: state.token
            }
          }).then(({ data }) => {
            console.log('getUserPurse',data);
            commit('setPurseInfo', data);
            resolve(data);
          }).catch((error) => {
            reject(error);
          });
        } else {
          resolve(state.purseInfo);
        }
      });
    },
    
    }
  }
});

export default store;

this.$store.commit

 methods: {
    // 登陸
    login() {
      let token = this.$route.query.token;
      login({
        data: {
          token
        },
        isReturnResult: true,
        isReturnError: true
      }).then(({ code, data, message }) => {
        if (code === 200) {
          this.$store.commit('setUid', data.uid);
          this.$store.commit('setToken', data.token);
          this.$router.replace({
            path: '/wallet'
          });
        } else if (code === 1404) {
          this.tips = message;
        } else {
          this.tips = '登錄失敗，請(qǐng)重新操作！';
        }
      }).catch(() => {
        this.$toast('請(qǐng)檢查網(wǎng)絡(luò)設(shè)置');
      });
    }
  }

this.$store.dispatch

methods: {
// 用戶錢(qián)包信息
    getUserWalletInfo() {
      this.$store.dispatch("getUserPurse").then((data) => {
        // console.log('data',data);
        this.purseInfo = data;
        this.showPage = 1;
      }); 
    },
},

到了這里，關(guān)于記錄vue的一些踩坑日記的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！