Skip to content

xqz / dianDemo

Go to a project
Toggle navigation
Toggle navigation pinning
472d602c by 406803045
Options

添加history 模式，添加打包cdn

1 parent fcfd1c4f
Inline Side-by-side
Showing 7 changed files with 88 additions and 35 deletions
babel.config.js
module.exports = {
presets: ['@vue/app'],
presets: [['@vue/app', { useBuiltIns: 'entry' }]],
plugins: [
[
'import',
......
public/index.html
......@@ -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>
......
src/filters/filter.js
/*
* 隐藏用户手机号中间四位
*/
exports.hidePhone = phone => {
export const hidePhone = phone => {
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}
\ No newline at end of file
......
src/filters/index.js
import Vue from 'vue'
import filter from './filter'
import * as filter from './filter'
Object.keys(filter).forEach(k => Vue.filter(k, filter[k]))
......
src/main.js
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({
......
src/router/index.js
......@@ -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
})
......
vue.config.js
'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')
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!