vue項目經歷難點回顧：
1.做一個活動頁面的時候，用history模式后上傳到服務器之后，如果訪問內容頁（子頁）之后，按f5刷新，會報一個404錯誤，
如果是Apache服務器，咱們可以自己做一個文件重新定向到index文件，
如果是nginx服務器，也是需要重定向配置服務器，然后重啟服務器，
2.線上跨域問題
本地開發
Webpack-dev-server proxyTable代理
proxyTable{
api:{
pathRewrite:{
}
}
}
package.json proxy
線上開發
后端：
Allow-accces-origin:"*"
前端:
nginx配置
jsonp
3.vue項目中用v-for 循環本地圖片， 圖片不顯示，
解決辦法：1.使用require動態引入圖片，
2.或將圖片放static文件夾里面
4.css引用圖片打包后找不到文件資源的問題
css引入圖片再打包后，style-loader無法設置自己的publicPath，所以只要改變style-loader中的publicPath即可，一行代碼即可以搞定，
找到build/util.js文件中ExtractTextPlugin的css路徑，手動添加publicPath參數，
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
重新build一次，問題解決了
5.引入rem之后存在個問題，會導致后期引入的ui庫樣式變小
安裝postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
因為 postcss-plugin-px2rem 這個插件 配置選項上有 exclude 屬性，它可以配置 是否對 某個文件夾下的所有css文件不進行從px到rem的轉換。
所以我們可以利用這個特性，把項目中的 node_module 文件夾里面安裝的ui框架排除掉。這樣如果我們項目中是用了前端UI框架的話，就不會吧UI框（Vant,Element等）中的 px單位轉換成rem了
配置exclude選項，需要注意的是這個配置在vue.config.js中式不起作用的，如圖。
正確的配置位置是項目根目錄下的postcss.config.js文件，如果你的項目沒有生成這個獨立文件，就需要在你的package.js里設置。
postcss.config.js
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
}
};
package.json
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude":{
"remUnit": 75,
"exclude":"/node_modules|floder_name/i"
}
}
},
6.node更新后，報錯：
報錯：
Module build failed (from ./node_modules/sass-loader/lib/loader.js): Cannot find module 'node-sass‘
npm cache clean -force //npm清除緩存
npm install -g mirror-config-china //切換國內鏡像
npm install node-sass
7.從詳情頁返回列表時保存瀏覽位置
用到keep-alive來緩存頁面
當詳情頁中改變列表數據時，配合keep-alive,需要在vue鈎子函數activated中，對數據進行更改
activated keep-alive組件激活時調用。
deactivated keep-alive組件停用時調用。
1.用到keep-alive來緩存頁面
2.當詳情頁中改變列表數據時，配合keep-alive,需要在vue鈎子函數activated中，對數據進行更改
3.在從其他頁面進入時，頁面要重新加載數據。頁面從列表進入其他頁面（非詳情頁）時，銷毀當前的vue實例。此時需用到組件內的路由守衛，beforeRouteEnter和beforeRouteLeave
8.使用flex布局，文字超出部分變省略號
使用flex布局的時候，子元素使用了flex:1這個屬性來占滿剩下的寬度，但是超出部分的文字不能變成省略號，而是把元素給撐開了。這是因為如果沒有設置width,當內部元素的內容大小超過平均分配的剩余空間時,元素的寬度等於內容大小。所以寬度要設置成0，直接設置width為0可以保證元素寬度平分父元素寬度。
overflow: hidden;/*超出部分隱藏*/
text-overflow:ellipsis;/* 超出部分顯示省略號 */
white-space: nowrap;/*規定段落中的文本不進行換行 */
flex:1;
width:0
9.實現權限控制
在用戶登錄的時候，后台會返回一個token，我們把token存在本地cookie或者localstorge、sessionstorge中，然后所有的api接口請求都帶上這個token，后台拿到token就知道用戶身份，也知道用戶有哪些權限。用戶在退出的時候，刪除token。
路由全局守衛 router.beforeEach(to,from,next)
當從一個路由跳轉到另一個路由時觸發此守衛，也叫全局前置守衛。
所以它是跳轉前觸發的。任何路由跳轉都會觸發。
每個守衛都有三個參數：
to：這是你要跳去的路由對象；
from：這是你要離開的路由對象；
next：是一個方法，它接收參數；
next（） 跳轉
next（flase） 中斷跳轉
next（{path:"/"}） 中斷跳轉，跳轉到一個新的路徑
axios攔截器
使用axios 實現登錄功能的流程（攔截器）
先添加攔截器判斷， 利用interceptors 調用request ，判斷token 是否存在，如果存在，直接跳轉
axios攔截器：
// 請求攔截,可以將請求的配置進行二次處理。
axios.
interceptors.request.use(config=>{
// config 是axios的配置信息.
// console.log(config);
if(localStorage.token){
config.headers = {
authorization:localStorage.token
}
}
store.commit("CHANGE_LOADING",true);
config.url = "/ele"+config.url;
return config;
})
// 響應攔截
axios.
interceptors.response.use(({data})=>{
console.log(44444444);
// 返回的值即是axios得到的值
store.commit("CHANGE_LOADING",false);
if(data.ok === 2 || data.ok === 3){
store.commit("OUT_LOGIN");
}else{
return data;
}
10.canvas圖片問題
做的一個項目需要將兩張圖片合成一張圖片輸出，想到可以用canvas來實現圖片的合成
var self = this;
var codeImg = document.getElementById("qrcode").getElementsByTagName("img")[0];
var bgImg = document.createElement("img");
codeImg.setAttribute("crossOrigin", 'anonymous');
bgImg.setAttribute("crossOrigin", 'anonymous');
var canvas = document.getElementById("myCanvas");
canvas.width = "375";
canvas.height = '667';
var ctx = canvas.getContext("2d");
ctx.rect(0,0,375,667);
ctx.fillStyle = '#fff';
ctx.fill();
問題1：
通過canvas合成圖片有一個要注意的技術點，就是獲取的img元素，需要設置屬性
img.setAttribute("crossOrigin","anonymous")
不設置該屬性的話，就會出現錯誤如下：
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
問題2：
在這個圖片合成的過程中，有一個問題就是由於有一個圖片是需要請求服務器顯示的，所以，在用canvas合成的過程中，需要判斷服務器已經下載完成顯示后，才進行ctx.drawImage()，否則就會出錯。這就需要通過onload事件在判斷圖片是否加載完成
bgImg.src = self.imgsrc;
bgImg.addEventListener('load',function() {
self.isShow = true;
ctx.drawImage(bgImg,0,0,375,667);
ctx.drawImage(codeImg,270,568,90,90);
imgURL = canvas.toDataURL("image/png");
var img = new Image();
document.getElementById("imgWrap").appendChild(img);
img.src = imgURL;
self.finalSrc = imgURL;
img.style.width = 100 + '%';
img.style.height = 100 + '%';
canvas.style.display = "none";
})
原因：
用到了
window.onload ，在這個事件發生時初始化，然后在 iOS webview 上這個事件不觸發
解決方法：
bgImg.src = self.imgsrc;放在onload事件的后面，
組件封裝：
Vue組件封裝過程
● 首先，使用Vue.extend()創建一個組件
● 然后，使用Vue.component()方法注冊組件
● 接着，如果子組件需要數據，可以在props中接受定義
● 最后，子組件修改好數據之后，想把數據傳遞給父組件，可以使用emit()方法
1.在公共方法中（如 public.js 中），加入函數防抖和節流方法
// 防抖
export function _debounce(fn, delay) {
var delay = delay || 200;
var timer;
return function () {
var th = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delay);
};
}
// 節流
export function _throttle(fn, interval) {
var last;
var timer;
var interval = interval || 200;
return function () {
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}
2、在需要使用的組件引用
import { _debounce } from "@/utils/public";
3、在 methods 中使用
methods: {
// 改變場數
changefield: _debounce(function(_type, index, item) {
// do something ...
}, 200)
}
2.封裝axios
import axios from 'axios'
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
export default axios