JLNTV_IPD/vue-h5-template
4
0
Fork 0
mirror of https://github.com/sunniejs/vue-h5-template.git synced 2025-04-06 03:57:50 +08:00
Code Issues Projects Releases Wiki Activity

添加history 模式，添加打包cdn

Browse Source
This commit is contained in:
406803045 2019-06-06 10:06:12 +08:00
parent fcfd1c4f1c
commit 472d602c29
7 changed files with 88 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
babel.config.js
View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
presets: ['@vue/app'], presets: [['@vue/app', { useBuiltIns: 'entry' }]],
plugins: [ plugins: [
[ [
'import', 'import',

11
public/index.html
View File

@ -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>

2
src/filters/filter.js
View File

@ -1,6 +1,6 @@
/* /*
* 隐藏用户手机号中间四位 * 隐藏用户手机号中间四位
*/ */
exports.hidePhone = phone => { export const hidePhone = phone => {
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
} }

2
src/filters/index.js
View File

@ -1,5 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
import filter from './filter' import * as filter from './filter'
Object.keys(filter).forEach(k => Vue.filter(k, filter[k])) Object.keys(filter).forEach(k => Vue.filter(k, filter[k]))

3
src/main.js
View File

@ -1,5 +1,4 @@
import Vue from 'vue' import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import '@/assets/css/index.scss' // global css import '@/assets/css/index.scss' // global css
// 移动端适配 // 移动端适配
@ -7,7 +6,7 @@ import 'lib-flexible/flexible.js'
import App from './App' import App from './App'
import store from './store' import store from './store'
import router from './router' import router from './router'
import filters from './filter' import filters from './filters'
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ new Vue({

3
src/router/index.js
View File

@ -14,7 +14,8 @@ export const constantRoutes = [
const createRouter = () => const createRouter = () =>
new Router({ new Router({
// mode: 'history', // require service support mode: 'history', // require service support
base: '/vueapp/',
scrollBehavior: () => ({ y: 0 }), scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes routes: constantRoutes
}) })

100
vue.config.js
View File

@ -1,14 +1,43 @@
'use strict' 'use strict'
const path = require('path') const path = require('path')
const defaultSettings = require('./src/config/index.js') const defaultSettings = require('./src/config/index.js')
function resolve(dir) { function resolve(dir) {
return path.join(__dirname, dir) return path.join(__dirname, 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',
vant: 'vant',
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/babel-polyfill/7.4.4/polyfill.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: process.env.NODE_ENV === 'development' ? '/' : '/vueapp/',
outputDir: 'dist', outputDir: 'dist',
assetsDir: 'static', assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development', lintOnSave: process.env.NODE_ENV === 'development',
@ -21,37 +50,53 @@ module.exports = {
errors: true errors: true
} }
}, },
// css: {
// loaderOptions: { configureWebpack: config => {
// postcss: { // 为生产环境修改配置...
// plugins: [ if (process.env.NODE_ENV === 'production') {
// require('postcss-plugin-px2rem')({ // externals里的模块不打包
// rootValue: 75, // 换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。 Object.assign(config, {
// // unitPrecision: 5, //允许REM单位增长到的十进制数字。 name: name,
// // propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。 entry:["@babel/polyfill", "./src/main.js"],
// // propBlackList: [], //黑名单 externals: externals
// exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值 })
// // selectorBlackList: [], //要忽略并保留为px的选择器 }
// // ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。 // 为开发环境修改配置...
// // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。 if (process.env.NODE_ENV === 'development') {
// mediaQuery: false, // （布尔值）允许在媒体查询中转换px。 }
// minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0 },
// }) // configureWebpack: {
// ] // name: name,
// 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
// config.entry.app = ["babel-polyfill", resolve('src/main.js')]
// 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') {
console.log(args)
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 +115,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')