mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-04-06 03:57:50 +08:00
添加history 模式，添加打包cdn
This commit is contained in:
406803045
parent
fcfd1c4f1c
commit
472d602c29
@ -1,5 +1,5 @@
|
||||
module.exports = {
|
||||
presets: ['@vue/app'],
|
||||
presets: [['@vue/app', { useBuiltIns: 'entry' }]],
|
||||
plugins: [
|
||||
[
|
||||
'import',
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/*
|
||||
* 隐藏用户手机号中间四位
|
||||
*/
|
||||
exports.hidePhone = phone => {
|
||||
export const hidePhone = phone => {
|
||||
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import filter from './filter'
|
||||
import * as filter from './filter'
|
||||
|
||||
Object.keys(filter).forEach(k => Vue.filter(k, filter[k]))
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
|
||||
import '@/assets/css/index.scss' // global css
|
||||
// 移动端适配
|
||||
@ -7,7 +6,7 @@ import 'lib-flexible/flexible.js'
|
||||
import App from './App'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
import filters from './filter'
|
||||
import filters from './filters'
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
|
||||
@ -14,7 +14,8 @@ export const constantRoutes = [
|
||||
|
||||
const createRouter = () =>
|
||||
new Router({
|
||||
// mode: 'history', // require service support
|
||||
mode: 'history', // require service support
|
||||
base: '/vueapp/',
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: constantRoutes
|
||||
})
|
||||
|
||||
100
vue.config.js
100
vue.config.js
@ -1,14 +1,43 @@
|
||||
'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',
|
||||
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 = {
|
||||
publicPath: '/',
|
||||
publicPath: process.env.NODE_ENV === 'development' ? '/' : '/vueapp/',
|
||||
outputDir: 'dist',
|
||||
assetsDir: 'static',
|
||||
lintOnSave: process.env.NODE_ENV === 'development',
|
||||
@ -21,37 +50,53 @@ 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, {
|
||||
name: name,
|
||||
entry:["@babel/polyfill", "./src/main.js"],
|
||||
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
|
||||
// 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
|
||||
config.module
|
||||
.rule('vue')
|
||||
@ -70,7 +115,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