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 86 additions and 33 deletions
babel.config.js
1 module.exports = { 1 module.exports = {
2 presets: ['@vue/app'], 2 presets: [['@vue/app', { useBuiltIns: 'entry' }]],
3 plugins: [ 3 plugins: [
4 [ 4 [
5 'import', 5 'import',
......
public/index.html
...@@ -4,8 +4,12 @@ ...@@ -4,8 +4,12 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7
8 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 7 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 <% for (var i in
9 htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
10 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
11 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
12 <% } %>
9 <title><%= webpackConfig.name %></title> 13 <title><%= webpackConfig.name %></title>
10 </head> 14 </head>
11 <body> 15 <body>
...@@ -13,6 +17,11 @@ ...@@ -13,6 +17,11 @@
13 <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> 17 <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 </noscript> 18 </noscript>
15 <div id="app"></div> 19 <div id="app"></div>
20 <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
21 <% for (var i in
22 htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
23 <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
24 <% } %>
16 <!-- built files will be auto injected --> 25 <!-- built files will be auto injected -->
17 </body> 26 </body>
18 </html> 27 </html>
......
src/filters/filter.js
1 /* 1 /*
2 * 隐藏用户手机号中间四位 2 * 隐藏用户手机号中间四位
3 */ 3 */
4 exports.hidePhone = phone => { 4 export const hidePhone = phone => {
5 return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') 5 return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
6 } 6 }
...\ No newline at end of file ...\ No newline at end of file
......
src/filters/index.js
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import filter from './filter' 2 import * as filter from './filter'
3 3
4 Object.keys(filter).forEach(k => Vue.filter(k, filter[k])) 4 Object.keys(filter).forEach(k => Vue.filter(k, filter[k]))
5 5
......
src/main.js
1 import Vue from 'vue' 1 import Vue from 'vue'
2
3 import 'normalize.css/normalize.css' // A modern alternative to CSS resets 2 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
4 import '@/assets/css/index.scss' // global css 3 import '@/assets/css/index.scss' // global css
5 // 移动端适配 4 // 移动端适配
...@@ -7,7 +6,7 @@ import 'lib-flexible/flexible.js' ...@@ -7,7 +6,7 @@ import 'lib-flexible/flexible.js'
7 import App from './App' 6 import App from './App'
8 import store from './store' 7 import store from './store'
9 import router from './router' 8 import router from './router'
10 import filters from './filter' 9 import filters from './filters'
11 Vue.config.productionTip = false 10 Vue.config.productionTip = false
12 11
13 new Vue({ 12 new Vue({
......
src/router/index.js
...@@ -14,7 +14,8 @@ export const constantRoutes = [ ...@@ -14,7 +14,8 @@ export const constantRoutes = [
14 14
15 const createRouter = () => 15 const createRouter = () =>
16 new Router({ 16 new Router({
17 // mode: 'history', // require service support 17 mode: 'history', // require service support
18 base: '/vueapp/',
18 scrollBehavior: () => ({ y: 0 }), 19 scrollBehavior: () => ({ y: 0 }),
19 routes: constantRoutes 20 routes: constantRoutes
20 }) 21 })
......
vue.config.js
...@@ -7,8 +7,37 @@ function resolve(dir) { ...@@ -7,8 +7,37 @@ function resolve(dir) {
7 7
8 const name = defaultSettings.title || 'vue mobile template' // page title 8 const name = defaultSettings.title || 'vue mobile template' // page title
9 const port = 9018 // dev port 9 const port = 9018 // dev port
10 const externals = {
11 vue: 'Vue',
12 'vue-router': 'VueRouter',
13 vuex: 'Vuex',
14 vant: 'vant',
15 axios: 'axios',
16 'crypto-js': 'CryptoJS'
17 }
18 // cdn
19 const cdn = {
20 // 开发环境
21 dev: {
22 css: [],
23 js: []
24 },
25 // 生产环境
26 build: {
27 css: ['https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'],
28 js: [
29 'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js',
30 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js',
31 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js',
32 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js',
33 'https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js',
34 'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js',
35 'https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js'
36 ]
37 }
38 }
10 module.exports = { 39 module.exports = {
11 publicPath: '/', 40 publicPath: process.env.NODE_ENV === 'development' ? '/' : '/vueapp/',
12 outputDir: 'dist', 41 outputDir: 'dist',
13 assetsDir: 'static', 42 assetsDir: 'static',
14 lintOnSave: process.env.NODE_ENV === 'development', 43 lintOnSave: process.env.NODE_ENV === 'development',
...@@ -21,37 +50,53 @@ module.exports = { ...@@ -21,37 +50,53 @@ module.exports = {
21 errors: true 50 errors: true
22 } 51 }
23 }, 52 },
24 // css: { 53
25 // loaderOptions: { 54 configureWebpack: config => {
26 // postcss: { 55 // 为生产环境修改配置...
27 // plugins: [ 56 if (process.env.NODE_ENV === 'production') {
28 // require('postcss-plugin-px2rem')({ 57 // externals里的模块不打包
29 // rootValue: 75, // 换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。 58 Object.assign(config, {
30 // // unitPrecision: 5, //允许REM单位增长到的十进制数字。
31 // // propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
32 // // propBlackList: [], //黑名单
33 // exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
34 // // selectorBlackList: [], //要忽略并保留为px的选择器
35 // // ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
36 // // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
37 // mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
38 // minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
39 // })
40 // ]
41 // }
42 // }
43 // },
44 configureWebpack: {
45 name: name, 59 name: name,
46 resolve: { 60 entry:["@babel/polyfill", "./src/main.js"],
47 alias: { 61 externals: externals
48 '@': resolve('src') 62 })
49 } 63 }
64 // 为开发环境修改配置...
65 if (process.env.NODE_ENV === 'development') {
50 } 66 }
51 }, 67 },
68 // configureWebpack: {
69 // name: name,
70 // resolve: {
71 // alias: {
72 // '@': resolve('src')
73 // }
74 // }
75 // },
52 chainWebpack(config) { 76 chainWebpack(config) {
53 config.plugins.delete('preload') // TODO: need test 77 config.plugins.delete('preload') // TODO: need test
54 config.plugins.delete('prefetch') // TODO: need test 78 config.plugins.delete('prefetch') // TODO: need test
79 // config.entry.app = ["babel-polyfill", resolve('src/main.js')]
80 // alias
81 config.resolve.alias
82 .set('@', resolve('src'))
83 .set('assets', resolve('src/assets'))
84 .set('views', resolve('src/views'))
85 .set('components', resolve('src/components'))
86 /**
87 * 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改
88 */
89 config.plugin('html').tap(args => {
90 if (process.env.NODE_ENV === 'production') {
91 console.log(args)
92 args[0].cdn = cdn.build
93 }
94 if (process.env.NODE_ENV === 'development') {
95 args[0].cdn = cdn.dev
96 }
97 return args
98 })
99
55 // set preserveWhitespace 100 // set preserveWhitespace
56 config.module 101 config.module
57 .rule('vue') 102 .rule('vue')
...@@ -70,7 +115,6 @@ module.exports = { ...@@ -70,7 +115,6 @@ module.exports = {
70 ) 115 )
71 116
72 config.when(process.env.NODE_ENV !== 'development', config => { 117 config.when(process.env.NODE_ENV !== 'development', config => {
73 console.log(config)
74 config 118 config
75 .plugin('ScriptExtHtmlWebpackPlugin') 119 .plugin('ScriptExtHtmlWebpackPlugin')
76 .after('html') 120 .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!