項(xiàng)目用到的技術(shù)：vue + vue-router + vuex + axios + vant-ui + webpack + sass
項(xiàng)目從3月中旬開始搭建，當(dāng)時(shí)需求都沒(méi)明確，這種情況下只能邊開發(fā)邊定需求，這感覺(jué)mmmmp...大家懂的，吐槽的話就不多說(shuō)了。好在在團(tuán)隊(duì)的辛勤加班下，終于一個(gè)月的時(shí)間把一期完成了（搜索、收藏、轉(zhuǎn)發(fā)、積分、秒殺（部分功能）、購(gòu)物、售后、優(yōu)惠券、簽到、評(píng)價(jià)、資訊、訂單等），達(dá)到了上線要求（也不知道這個(gè)時(shí)間在大家眼里是長(zhǎng)了還是短了），在這里記錄一下目前遇到的問(wèn)題。
點(diǎn)贊：后端的配合
由于項(xiàng)目從開始搭建到一期結(jié)束，前端部分幾乎都是自己完成的（只有簽到功能和用戶信息編輯功能交給新同事做），同期的后端有3人，所以前端部分的壓力還是挺大的（主要是時(shí)間問(wèn)題）。不過(guò)很慶幸，嬌氣點(diǎn)說(shuō)，后端很遷就自己，大部分的數(shù)據(jù)都是根據(jù)前端需要的結(jié)構(gòu)直接返回的，幾乎不需要怎么處理，這樣就大大減少了前端的開發(fā)壓力和時(shí)間。
vant-ui使用問(wèn)題記錄
1.van-address-edit使用
使用沒(méi)什么問(wèn)題，給對(duì)應(yīng)的參數(shù)就好，area-list入口，要記得引入，完整的area.json
2.van-address-edit地址回顯問(wèn)題
<van-address-edit
:area-list="areaList"
:address-info="addressInfo"
show-set-default
@save="handleSave"
save-button-text="保存并使用"
/>
addressInfo: {
id: '1',
name: '1111',
tel: '13562345785',
province:'天津市',
city:'天津市',
county:'和平區(qū)',
areaCode:'120101',
addressDetail: '1號(hào)',
isDefault: true,
},//收件人信息初始值，其中province city county是中文字符串，areaCode是對(duì)應(yīng)的code，而且一定要寫這個(gè)參數(shù)，不然地址傳進(jìn)去是無(wú)效的
3.按照api引入vant的css報(bào)錯(cuò)
其實(shí)這個(gè)問(wèn)題自己也在糾結(jié)應(yīng)不應(yīng)該寫出來(lái)，因?yàn)橐话闱闆r下，大家都會(huì)選擇按需引入，自己?jiǎn)栠^(guò)同期使用vant-ui的朋友，他按需引入是沒(méi)有問(wèn)題的，但是自己的項(xiàng)目因?yàn)橛玫降慕M件比較多，所以沒(méi)有按需引入，而是導(dǎo)入所以組件。按照官方的api是這樣寫的
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
而當(dāng)自己這樣引入的時(shí)候卻報(bào)css文件找不到的錯(cuò)誤，但是按照路徑打開node_modules下vant-lib是有index.css文件存在的。
4.真的，vant-ui的api該找個(gè)時(shí)間好好完善下，挺多地方說(shuō)的不夠詳細(xì)，包括給出的例子，另外api頁(yè)面沒(méi)有搜索功能，在線編輯功能，不太方便，不知道后期會(huì)不會(huì)加上。
微信分享問(wèn)題：
注意：history模式。
前端最主要的問(wèn)題是傳當(dāng)前頁(yè)的url給后端進(jìn)行驗(yàn)證，而單純用let url = encodeURI(window.location.href.split('#')[0])來(lái)獲取當(dāng)前頁(yè)的url，安卓機(jī)是沒(méi)問(wèn)題的，但是ios就不行，因?yàn)閕os只能獲取到進(jìn)入商城第一個(gè)頁(yè)面的url，所以導(dǎo)致驗(yàn)證不通過(guò)。這個(gè)問(wèn)題說(shuō)實(shí)話，是比較頭疼的，網(wǎng)上查找了好多方法都沒(méi)有用。
目前用的解決方案是router刷新 + vuex，這里做個(gè)記錄。
main.js
router.beforeEach((to, from, next) =>{
//默認(rèn)進(jìn)到頁(yè)面置頂
window.scrollTo(0, 0);
/*解決ios分享驗(yàn)證及分享打開首頁(yè)問(wèn)題*/
if (to.path !== location.pathname) {
此處不可使用location.replace
location.assign(to.fullPath)
} else {
next()
}
})
當(dāng)前頁(yè)
//引入vuex
import { mapGetters } from 'vuex';
computed: mapGetters([
'url'
]),
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
let url = '';
if(isAndroid){
url = this.$route.fullPath;
}
if(isIOS){
if(!this.url){
this.$store.dispatch('setEntryUrl',this.$route.fullPath);
}
url = this.url;
}
//如果當(dāng)前頁(yè)url是https://www.test.com/index/web/test，那么到這步url的值是/index/web/test，需要自己拼接域名
let domain = document.domain;
url = 'https://' + domain + url
vuex
//modules--url.js
import {
SET_URL
} from '../mutation-types'
const state = {
url: ''
};
const getters = {
url: (state)=>state.url
};
const mutations = {
[SET_URL](state, data){
state.url = data;
}
};
export default {
state,
getters,
mutations
}
//index.js
import Vue from 'vue'
import Vuex from 'vuex';
import * as actions from './actions'
Vue.use(Vuex);
const store = new Vuex.Store({
actions,
modules: {
url:{
state : {
url: ''
},
getters : {
url: (state)=>state.url
},
mutations : {
['GET_URL'](state, data){
state.url = data;
}
}
}
}
});
export default store;
//active.js
export const setEntryUrl = ({ commit }, data) => {
commit(types.SET_URL, data);
};
//mutation-types.js
export const SET_URL = 'SET_URL';
//store.js
import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions'
import url from './modules/url';
Vue.use(Vuex);
export default new Vuex.Store({
actions,
modules: {
url
}
});
編輯器編輯的內(nèi)容，使用v-html顯示，css無(wú)法修改
原因：不詳
解決方法：sytle標(biāo)簽把scoped去掉(同時(shí)，網(wǎng)上查到可以用>>> 方法指定到下層，但是嘗試沒(méi)用，所以只作為記錄)
頁(yè)面部署服務(wù)器后刷新頁(yè)面報(bào)404
原因：服務(wù)器配置問(wèn)題
解決方法：服務(wù)器配置相關(guān)信息就好了，另外，前端的router要根據(jù)后端路由層級(jí)進(jìn)行配置，例如：本項(xiàng)目后端路由有兩個(gè)層級(jí)，那么項(xiàng)目中前端的路由也要跟著兩個(gè)層級(jí)（/index/web/cart，類似這樣的，其中web層級(jí)可以隨便命名，但是要統(tǒng)一）
項(xiàng)目打包后提示靜態(tài)資源404（即css,js文件加載不到）
原因：后端路徑只能認(rèn)到根目錄，而前端打包的文件都在dist文件夾內(nèi)，里面還有二級(jí)目錄，后端無(wú)法進(jìn)入，導(dǎo)致獲取不到里面的文件，從而報(bào)錯(cuò)
解決方法：進(jìn)入config--index.js文件，修改build的assetsPublicPath
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
/*此處原先為 /，指定到根目錄，加了dist/后就可以指定到dist文件夾了，注意，后面一定要 / */
assetsPublicPath: '/dist/',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
ios10打開白屏
解決方法：
1.進(jìn)入build--webpack.prod.conf.js文件
2.在UglifyJsPlugin的定義里添加關(guān)于mangle的選項(xiàng)，使它變成下面這個(gè)樣子：
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
},
//這里是新加的
mangle: {
safari10: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
node-sass在npm引入所有包后仍報(bào)undefined或找不到的錯(cuò)誤
解決方法：npm rebuild node-sass
