项目用到的技术：vue + vue-router + vuex + axios + vant-ui + webpack + sass
项目从3月中旬开始搭建，当时需求都没明确，这种情况下只能边开发边定需求，这感觉mmmmp...大家懂的，吐槽的话就不多说了。好在在团队的辛勤加班下，终于一个月的时间把一期完成了（搜索、收藏、转发、积分、秒杀（部分功能）、购物、售后、优惠券、签到、评价、资讯、订单等），达到了上线要求（也不知道这个时间在大家眼里是长了还是短了），在这里记录一下目前遇到的问题。
点赞：后端的配合
由于项目从开始搭建到一期结束，前端部分几乎都是自己完成的（只有签到功能和用户信息编辑功能交给新同事做），同期的后端有3人，所以前端部分的压力还是挺大的（主要是时间问题）。不过很庆幸，娇气点说，后端很迁就自己，大部分的数据都是根据前端需要的结构直接返回的，几乎不需要怎么处理，这样就大大减少了前端的开发压力和时间。
vant-ui使用问题记录
1.van-address-edit使用
使用没什么问题，给对应的参数就好，area-list入口，要记得引入，完整的area.json
2.van-address-edit地址回显问题
<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:'和平区',
areaCode:'120101',
addressDetail: '1号',
isDefault: true,
},//收件人信息初始值，其中province city county是中文字符串，areaCode是对应的code，而且一定要写这个参数，不然地址传进去是无效的
3.按照api引入vant的css报错
其实这个问题自己也在纠结应不应该写出来，因为一般情况下，大家都会选择按需引入，自己问过同期使用vant-ui的朋友，他按需引入是没有问题的，但是自己的项目因为用到的组件比较多，所以没有按需引入，而是导入所以组件。按照官方的api是这样写的
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
而当自己这样引入的时候却报css文件找不到的错误，但是按照路径打开node_modules下vant-lib是有index.css文件存在的。
4.真的，vant-ui的api该找个时间好好完善下，挺多地方说的不够详细，包括给出的例子，另外api页面没有搜索功能，在线编辑功能，不太方便，不知道后期会不会加上。
微信分享问题：
注意：history模式。
前端最主要的问题是传当前页的url给后端进行验证，而单纯用let url = encodeURI(window.location.href.split('#')[0])来获取当前页的url，安卓机是没问题的，但是ios就不行，因为ios只能获取到进入商城第一个页面的url，所以导致验证不通过。这个问题说实话，是比较头疼的，网上查找了好多方法都没有用。
目前用的解决方案是router刷新 + vuex，这里做个记录。
main.js
router.beforeEach((to, from, next) =>{
//默认进到页面置顶
window.scrollTo(0, 0);
/*解决ios分享验证及分享打开首页问题*/
if (to.path !== location.pathname) {
此处不可使用location.replace
location.assign(to.fullPath)
} else {
next()
}
})
当前页
//引入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;
}
//如果当前页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
}
});
编辑器编辑的内容，使用v-html显示，css无法修改
原因：不详
解决方法：sytle标签把scoped去掉(同时，网上查到可以用>>> 方法指定到下层，但是尝试没用，所以只作为记录)
页面部署服务器后刷新页面报404
原因：服务器配置问题
解决方法：服务器配置相关信息就好了，另外，前端的router要根据后端路由层级进行配置，例如：本项目后端路由有两个层级，那么项目中前端的路由也要跟着两个层级（/index/web/cart，类似这样的，其中web层级可以随便命名，但是要统一）
项目打包后提示静态资源404（即css,js文件加载不到）
项目目录
原因：后端路径只能认到根目录，而前端打包的文件都在dist文件夹内，里面还有二级目录，后端无法进入，导致获取不到里面的文件，从而报错
解决方法：进入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.进入build--webpack.prod.conf.js文件
2.在UglifyJsPlugin的定义里添加关于mangle的选项，使它变成下面这个样子：
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
},
//这里是新加的
mangle: {
safari10: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
node-sass在npm引入所有包后仍报undefined或找不到的错误
解决方法：npm rebuild node-sass
网友评论