From f97484c7258fd0cfd82b9755b2f73a5c38626a0c Mon Sep 17 00:00:00 2001 From: 406803045 <406803045@qq.com> Date: Mon, 27 May 2019 18:02:22 +0800 Subject: [PATCH] =?UTF-8?q?=E6=89=93=E5=8C=85cdn?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + public/index.html | 11 ++- src/config/env.development.js | 5 +- src/config/env.production.js | 5 +- src/config/env.staging.js | 5 +- src/utils/package.js | 124 ++++++++++++++++++++++++++++++++++ src/utils/signature.js | 0 src/views/home/index.vue | 3 +- vue.config.js | 92 +++++++++++++++++-------- 9 files changed, 213 insertions(+), 33 deletions(-) create mode 100644 src/utils/package.js delete mode 100644 src/utils/signature.js diff --git a/package.json b/package.json index c13ef79..d9396a8 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ }, "dependencies": { "axios": "0.18.0", + "crypto-js": "^3.1.9-1", "lib-flexible": "^0.3.2", "normalize.css": "7.0.0", "vant": "^1.6.19", diff --git a/public/index.html b/public/index.html index 9659973..8f3b79a 100644 --- a/public/index.html +++ b/public/index.html @@ -4,8 +4,12 @@ - + <% for (var i in + htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %> + + + <% } %> <%= webpackConfig.name %> @@ -13,6 +17,11 @@ We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.
+ + <% for (var i in + htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %> + + <% } %> diff --git a/src/config/env.development.js b/src/config/env.development.js index b44a5f6..d117466 100644 --- a/src/config/env.development.js +++ b/src/config/env.development.js @@ -4,5 +4,8 @@ module.exports = { api: { base_api: 'https://xxx.xxx.com/admin', common_api: 'https://xxx.xxx.com/common' - } + }, + // package appid,appSecret + APPID: 'Pc690487e95992c395633866b', + APPSECRET: '01d552de9b864547b7e67d44568caeb9' } diff --git a/src/config/env.production.js b/src/config/env.production.js index af1b668..d7b140e 100644 --- a/src/config/env.production.js +++ b/src/config/env.production.js @@ -4,5 +4,8 @@ module.exports = { api: { base_api: 'https://xxx.xxx.com/admin', common_api: 'https://xxx.xxx.com/common' - } + }, + // package appid,appSecret + APPID: 'Pc690487e95992c395633866b', + APPSECRET: '01d552de9b864547b7e67d44568caeb9' } diff --git a/src/config/env.staging.js b/src/config/env.staging.js index 3c6e338..0ea7b24 100644 --- a/src/config/env.staging.js +++ b/src/config/env.staging.js @@ -3,5 +3,8 @@ module.exports = { api: { base_api: 'https://xxx.xxx.com/admin', common_api: 'https://xxx.xxx.com/common' - } + }, + // package appid,appSecret + APPID: 'Pc690487e95992c395633866b', + APPSECRET: '01d552de9b864547b7e67d44568caeb9' } diff --git a/src/utils/package.js b/src/utils/package.js new file mode 100644 index 0000000..5016d9c --- /dev/null +++ b/src/utils/package.js @@ -0,0 +1,124 @@ +/* + * @Author: sunnie.Song + * @Date: 2019-05-27 10:01:46 + * @Description: 接口签名说明文档 + */ + +import { APPID, APPSECRET } from '../config/index' +import CryptoJS from 'crypto-js' +/** + *对排序后的key值取值并生成 + */ +function objKeySort(obj) { + // 将obj中的所有key取出放入数组中,并按照ASCII排序 返回排序后的数组 + var newKey = Object.keys(obj).sort() + + var sortString = '' + // 将obj转化为排序后的键值对使用'key=value&key=value'方式转为字符串 + for (var i = 0; i < newKey.length; i++) { + sortString = sortString + newKey[i] + '=' + obj[newKey[i]] + '&' + } + // 返回字符串去除最有一个'&' + return sortString.substring(0, sortString.length - 1) +} +/* 参数编码序列*/ +function serializeParams(obj) { + const arr = [] + // key的vaule为空的时候，删除该key + const params = Object.assign({}, obj) + for (const key in params) { + if (!params[key]) { + delete params[key] + } + } + Object.keys(params).forEach(key => { + let value = params[key] + // 如果值为undefined,置空 + if (typeof value === 'undefined') { + value = '' + } + // 对于需要编码的文本（比如说中文）我们要进行编码 + arr.push([key, encodeURIComponent(value)].join('=')) + }) + return arr.join('&') +} +function isChineseChar(str) { + var reg = /[\u4E00-\u9FA5\uF900-\uFA2D]|[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/ + + return reg.test(str) +} +function encodeParams(obj) { + // const arr = [] + // key的vaule为空的时候，删除该key + const params = Object.assign({}, obj) + // for (const key in params) { + // if (!params[key]) { + // delete params[key] + // } + // } + Object.keys(params).forEach(key => { + let value = params[key] + // 如果值为undefined,置空 + if (typeof value === 'undefined') { + value = '' + } + // 如果有汉子 + if (isChineseChar(value)) { + params[key] = encodeURIComponent(value) + } else { + params[key] = value + } + }) + return params +} +/** + * 将参数打包 + * apiName: 接口名称 + * param: 参数obj 可选 + * isReturnStr: Boolean 可选 post是否返回string + */ + +function baleParams(apiName, param, isReturnStr) { + // 获取系统当前时间戳(精确到毫秒13位) //1511257250001 + var timestamp = new Date().valueOf() + /** + * appId ： 10010 系统账号 （参与签名） + * appSecret ：10011 系统账号密码（参与签名） + * apiName :接口名称（参与签名） + * params : 接口参数json格式 （参与签名,没有则不参与） + */ + + const paramObj = { + appId: APPID, + appSecret: APPSECRET, + apiName: apiName, + timeStamp: timestamp + } + // 参数 + if (param !== undefined) { + // 将参数转为json字符串 + const encode = encodeParams(param) + paramObj.params = JSON.stringify(encode) + } + // 参数按ASCII排序,返回使用'=','&'拼接的字符串 + const sort = objKeySort(paramObj) + // 将排序好的字符串使用MD5签名,并返回大写字符串 + // const sign = MD5.hexMD5(sort).toLocaleUpperCase() + var sign = CryptoJS.MD5(sort) + .toString(CryptoJS.enc.Hex) + .toLocaleUpperCase() + // 将appid, apiname, 时间戳 ,签名 重新作为参数传给服务器 + let parameters = { + appId: paramObj.appId, + timeStamp: timestamp, + apiName: apiName, + sign: sign, + params: paramObj.params + } + // 是否序列表 + if (isReturnStr === true) { + parameters = serializeParams(parameters) + } + return parameters +} +export default baleParams diff --git a/src/utils/signature.js b/src/utils/signature.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/views/home/index.vue b/src/views/home/index.vue index e3a1e2a..3a1fa00 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -22,8 +22,7 @@ export default { computed: {}, - mounted () { - console.log(process.env) + created () { }, methods: {} diff --git a/vue.config.js b/vue.config.js index 8344979..ff80152 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,12 +1,40 @@ 'use strict' const path = require('path') -const defaultSettings = require('./src/config/index.js') +const defaultSettings = require('./src/config/index.js') function resolve(dir) { return path.join(__dirname, dir) } const name = defaultSettings.title || 'vue mobile template' // page title const port = 9018 // dev port +const externals = { + vue: 'Vue', + 'vue-router': 'VueRouter', + vuex: 'Vuex', + 'mint-ui': 'MINT', + axios: 'axios', + 'crypto-js': 'CryptoJS' +} +// cdn +const cdn = { + // 开发环境 + dev: { + css: [], + js: [] + }, + // 生产环境 + build: { + css: ['https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'], + js: [ + 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js', + 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js', + 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js', + 'https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js', + 'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js', + 'https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js' + ] + } +} module.exports = { publicPath: '/', outputDir: 'dist', @@ -21,37 +49,48 @@ module.exports = { errors: true } }, - // css: { - // loaderOptions: { - // postcss: { - // plugins: [ - // require('postcss-plugin-px2rem')({ - // rootValue: 75, // 换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。 - // // unitPrecision: 5, //允许REM单位增长到的十进制数字。 - // // propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。 - // // propBlackList: [], //黑名单 - // exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值 - // // selectorBlackList: [], //要忽略并保留为px的选择器 - // // ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。 - // // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。 - // mediaQuery: false, // （布尔值）允许在媒体查询中转换px。 - // minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0 - // }) - // ] + configureWebpack: config => { + // 为生产环境修改配置... + if (process.env.NODE_ENV === 'production') { + // externals里的模块不打包 + Object.assign(config, { + externals: externals + }) + } + // 为开发环境修改配置... + if (process.env.NODE_ENV === 'development') { + } + }, + // configureWebpack: { + // name: name, + // resolve: { + // alias: { + // '@': resolve('src') // } // } // }, - configureWebpack: { - name: name, - resolve: { - alias: { - '@': resolve('src') - } - } - }, chainWebpack(config) { config.plugins.delete('preload') // TODO: need test config.plugins.delete('prefetch') // TODO: need test + // alias + config.resolve.alias + .set('@', resolve('src')) + .set('assets', resolve('src/assets')) + .set('views', resolve('src/views')) + .set('components', resolve('src/components')) + /** + * 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改 + */ + config.plugin('html').tap(args => { + if (process.env.NODE_ENV === 'production') { + args[0].cdn = cdn.build + } + if (process.env.NODE_ENV === 'development') { + args[0].cdn = cdn.dev + } + return args + }) + // set preserveWhitespace config.module .rule('vue') @@ -70,7 +109,6 @@ module.exports = { ) config.when(process.env.NODE_ENV !== 'development', config => { - console.log(config) config .plugin('ScriptExtHtmlWebpackPlugin') .after('html')