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": {
|
"dependencies": {
|
||||||
"axios": "0.18.0",
|
"axios": "0.18.0",
|
||||||
|
"crypto-js": "^3.1.9-1",
|
||||||
"lib-flexible": "^0.3.2",
|
"lib-flexible": "^0.3.2",
|
||||||
"normalize.css": "7.0.0",
|
"normalize.css": "7.0.0",
|
||||||
"vant": "^1.6.19",
|
"vant": "^1.6.19",
|
||||||
|
|||||||
@ -4,8 +4,12 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<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">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
|
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<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>
|
<title><%= webpackConfig.name %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="app"></div>
|
<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 -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -4,5 +4,8 @@ module.exports = {
|
|||||||
api: {
|
api: {
|
||||||
base_api: 'https://xxx.xxx.com/admin',
|
base_api: 'https://xxx.xxx.com/admin',
|
||||||
common_api: 'https://xxx.xxx.com/common'
|
common_api: 'https://xxx.xxx.com/common'
|
||||||
}
|
},
|
||||||
|
// package appid,appSecret
|
||||||
|
APPID: 'Pc690487e95992c395633866b',
|
||||||
|
APPSECRET: '01d552de9b864547b7e67d44568caeb9'
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,5 +4,8 @@ module.exports = {
|
|||||||
api: {
|
api: {
|
||||||
base_api: 'https://xxx.xxx.com/admin',
|
base_api: 'https://xxx.xxx.com/admin',
|
||||||
common_api: 'https://xxx.xxx.com/common'
|
common_api: 'https://xxx.xxx.com/common'
|
||||||
}
|
},
|
||||||
|
// package appid,appSecret
|
||||||
|
APPID: 'Pc690487e95992c395633866b',
|
||||||
|
APPSECRET: '01d552de9b864547b7e67d44568caeb9'
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,5 +3,8 @@ module.exports = {
|
|||||||
api: {
|
api: {
|
||||||
base_api: 'https://xxx.xxx.com/admin',
|
base_api: 'https://xxx.xxx.com/admin',
|
||||||
common_api: 'https://xxx.xxx.com/common'
|
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: {},
|
computed: {},
|
||||||
|
|
||||||
mounted () {
|
created () {
|
||||||
console.log(process.env)
|
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {}
|
methods: {}
|
||||||
|
|||||||
@ -7,6 +7,34 @@ function resolve(dir) {
|
|||||||
|
|
||||||
const name = defaultSettings.title || 'vue mobile template' // page title
|
const name = defaultSettings.title || 'vue mobile template' // page title
|
||||||
const port = 9018 // dev port
|
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 = {
|
module.exports = {
|
||||||
publicPath: '/',
|
publicPath: '/',
|
||||||
outputDir: 'dist',
|
outputDir: 'dist',
|
||||||
@ -21,37 +49,48 @@ module.exports = {
|
|||||||
errors: true
|
errors: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// css: {
|
configureWebpack: config => {
|
||||||
// loaderOptions: {
|
// 为生产环境修改配置...
|
||||||
// postcss: {
|
if (process.env.NODE_ENV === 'production') {
|
||||||
// plugins: [
|
// externals里的模块不打包
|
||||||
// require('postcss-plugin-px2rem')({
|
Object.assign(config, {
|
||||||
// rootValue: 75, // 换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
|
externals: externals
|
||||||
// // unitPrecision: 5, //允许REM单位增长到的十进制数字。
|
})
|
||||||
// // propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
|
}
|
||||||
// // propBlackList: [], //黑名单
|
// 为开发环境修改配置...
|
||||||
// exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
|
if (process.env.NODE_ENV === 'development') {
|
||||||
// // selectorBlackList: [], //要忽略并保留为px的选择器
|
}
|
||||||
// // ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
|
},
|
||||||
// // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
|
// configureWebpack: {
|
||||||
// mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
|
// name: name,
|
||||||
// minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
|
// resolve: {
|
||||||
// })
|
// alias: {
|
||||||
// ]
|
// '@': resolve('src')
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
configureWebpack: {
|
|
||||||
name: name,
|
|
||||||
resolve: {
|
|
||||||
alias: {
|
|
||||||
'@': resolve('src')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
chainWebpack(config) {
|
chainWebpack(config) {
|
||||||
config.plugins.delete('preload') // TODO: need test
|
config.plugins.delete('preload') // TODO: need test
|
||||||
config.plugins.delete('prefetch') // 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
|
// set preserveWhitespace
|
||||||
config.module
|
config.module
|
||||||
.rule('vue')
|
.rule('vue')
|
||||||
@ -70,7 +109,6 @@ module.exports = {
|
|||||||
)
|
)
|
||||||
|
|
||||||
config.when(process.env.NODE_ENV !== 'development', config => {
|
config.when(process.env.NODE_ENV !== 'development', config => {
|
||||||
console.log(config)
|
|
||||||
config
|
config
|
||||||
.plugin('ScriptExtHtmlWebpackPlugin')
|
.plugin('ScriptExtHtmlWebpackPlugin')
|
||||||
.after('html')
|
.after('html')
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user