mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-09-19 14:00:01 +08:00
打包cdn
This commit is contained in:
406803045
parent
09485e7952
commit
f97484c725
@ -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",
|
||||
|
||||
@ -4,8 +4,12 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<% for (var i in
|
||||
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
|
||||
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
|
||||
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
|
||||
<% } %>
|
||||
<title><%= webpackConfig.name %></title>
|
||||
</head>
|
||||
<body>
|
||||
@ -13,6 +17,11 @@
|
||||
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
|
||||
<% for (var i in
|
||||
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
|
||||
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
|
||||
<% } %>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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'
|
||||
}
|
||||
|
||||
@ -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'
|
||||
}
|
||||
|
||||
@ -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'
|
||||
}
|
||||
|
||||
124
src/utils/package.js
Normal file
124
src/utils/package.js
Normal file
@ -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
|
||||
@ -22,8 +22,7 @@ export default {
|
||||
|
||||
computed: {},
|
||||
|
||||
mounted () {
|
||||
console.log(process.env)
|
||||
created () {
|
||||
},
|
||||
|
||||
methods: {}
|
||||
|
||||
@ -7,6 +7,34 @@ function resolve(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')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user