Hooke / w4-vux-template

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fe6e6a75 1 parent ba55949b

fix

Inline Side-by-side
Showing 11 changed files with 225 additions and 63 deletions
1 -var dev = [{ 1 +var dev = [
2 - title: '登录页', 2 + {
3 - page: 'login' 3 + title: '登录页',
4 -}]; 4 + page: 'login'
5 + },
6 + {
7 + title: 'A',
8 + page: 'A'
9 + },
10 + {
11 + title: 'B',
12 + page: 'B'
13 + },
14 + {
15 + title: 'C',
16 + page: 'C'
17 + }
18 +];
5 19
6 module.exports = dev; 20 module.exports = dev;
......
1 -var prod = [{ 1 +var prod = [
2 - title: '登录页', 2 + {
3 - page: 'login' 3 + title: '登录页',
4 -}]; 4 + page: 'login'
5 + },
6 + {
7 + title: 'A',
8 + page: 'A'
9 + },
10 + {
11 + title: 'B',
12 + page: 'B'
13 + },
14 + {
15 + title: 'C',
16 + page: 'C'
17 + }
18 +];
5 19
6 module.exports = prod; 20 module.exports = prod;
......
1 +<!DOCTYPE html>
2 +<html lang="en">
3 + <head>
4 + <meta charset="utf-8">
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 + <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 + <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 + <!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
9 + <% for (var i in 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 + <% } %>
13 +
14 + <title><%= htmlWebpackPlugin.options.title %></title>
15 +
16 + <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
17 + <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
18 + <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"></script>
19 + <% } %>
20 + </head>
21 + <body>
22 + <noscript>
23 + <strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
24 + </noscript>
25 + <div id="A"></div>
26 + <!-- built files will be auto injected -->
27 + </body>
28 +</html>
1 +<!DOCTYPE html>
2 +<html lang="en">
3 + <head>
4 + <meta charset="utf-8">
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 + <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 + <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 + <!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
9 + <% for (var i in 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 + <% } %>
13 +
14 + <title><%= htmlWebpackPlugin.options.title %></title>
15 +
16 + <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
17 + <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
18 + <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"></script>
19 + <% } %>
20 + </head>
21 + <body>
22 + <noscript>
23 + <strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
24 + </noscript>
25 + <div id="B"></div>
26 + <!-- built files will be auto injected -->
27 + </body>
28 +</html>
1 +<!DOCTYPE html>
2 +<html lang="en">
3 + <head>
4 + <meta charset="utf-8">
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 + <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 + <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 + <!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
9 + <% for (var i in 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 + <% } %>
13 +
14 + <title><%= htmlWebpackPlugin.options.title %></title>
15 +
16 + <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
17 + <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
18 + <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"></script>
19 + <% } %>
20 + </head>
21 + <body>
22 + <noscript>
23 + <strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
24 + </noscript>
25 + <div id="C"></div>
26 + <!-- built files will be auto injected -->
27 + </body>
28 +</html>
...@@ -12,12 +12,12 @@ ...@@ -12,12 +12,12 @@
12 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet"> 12 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
13 <% } %> 13 <% } %>
14 14
15 + <title><%= htmlWebpackPlugin.options.title %></title>
16 +
15 <!-- 使用CDN加速的JS文件，配置在vue.config.js下 --> 17 <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
16 <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %> 18 <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
17 - <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"> 19 + <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"></script>
18 <% } %> 20 <% } %>
19 -
20 - <title><%= htmlWebpackPlugin.options.title %></title>
21 </head> 21 </head>
22 <body> 22 <body>
23 <noscript> 23 <noscript>
......
...@@ -11,11 +11,12 @@ ...@@ -11,11 +11,12 @@
11 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet"> 11 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
12 <% } %> 12 <% } %>
13 13
14 + <title><%= htmlWebpackPlugin.options.title %></title>
15 +
14 <!-- 使用CDN加速的JS文件，配置在vue.config.js下 --> 16 <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
15 <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %> 17 <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
16 - <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"> 18 + <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"></script>
17 <% } %> 19 <% } %>
18 - <title><%= htmlWebpackPlugin.options.title %></title>
19 </head> 20 </head>
20 <body> 21 <body>
21 <noscript> 22 <noscript>
......
1 -import Vue from 'vue' 1 +/* jshint esversion: 6 */
2 -import App from './App.vue' 2 +import Vue from 'vue';
3 -import router from './router' 3 +import App from './App.vue';
4 -import store from './store' 4 +import router from './router';
5 -import Vant from 'vant' 5 +import store from './store';
6 -import 'vant/lib/index.css' 6 +import Vant from 'vant';
7 +import 'vant/lib/index.css';
7 8
8 -Vue.use(Vant) 9 +Vue.use(Vant);
9 10
10 -Vue.config.productionTip = false 11 +Vue.config.productionTip = false;
11 12
12 new Vue({ 13 new Vue({
13 router, 14 router,
14 store, 15 store,
15 render: h => h(App) 16 render: h => h(App)
16 -}).$mount('#app') 17 +}).$mount('#app');
......
1 -// 多页面测试入口文件 1 +/* jshint esversion: 6 */
2 -import Vue from 'vue' 2 +import Vue from 'vue';
3 -import Vuex from 'vuex' 3 +import Vuex from 'vuex';
4 -import store from './vuex/store' 4 +import store from './vuex/store';
5 -import router from './router' 5 +import router from './router';
6 -import VueRouter from 'vue-router' 6 +import VueRouter from 'vue-router';
7 -import axios from './http' 7 +import axios from './http';
8 -import A from './A.vue' 8 +import A from './A.vue';
9 -import { sync } from 'vuex-router-sync' 9 +import { sync } from 'vuex-router-sync';
10 -import FastClick from 'fastclick' 10 +import FastClick from 'fastclick';
11 -import Vant from 'vant' 11 +import Vant from 'vant';
12 -import 'vant/lib/index.css' 12 +import 'vant/lib/index.css';
13 13
14 -sync(store, router) 14 +sync(store, router);
15 -Vue.use(VueRouter) 15 +Vue.use(VueRouter);
16 -Vue.use(Vuex) 16 +Vue.use(Vuex);
17 -Vue.use(Vant) 17 +Vue.use(Vant);
18 18
19 -Vue.config.productionTip = false 19 +Vue.config.productionTip = false;
20 -Vue.prototype.method = function () {} 20 +Vue.prototype.method = function () {};
21 21
22 -FastClick.attach(document.body) 22 +FastClick.attach(document.body);
23 23
24 new Vue({ 24 new Vue({
25 store, 25 store,
26 router, 26 router,
27 axios, 27 axios,
28 render: h => h(A) 28 render: h => h(A)
29 -}).$mount('#A') 29 +}).$mount('#A');
......
...@@ -27,6 +27,8 @@ ...@@ -27,6 +27,8 @@
27 27
28 <script> 28 <script>
29 export default { 29 export default {
30 + mounted () {
31 + },
30 data () { 32 data () {
31 return { 33 return {
32 value: '', 34 value: '',
......
...@@ -12,16 +12,24 @@ const posixJoin = _path => path.posix.join(assetsDir, _path); ...@@ -12,16 +12,24 @@ const posixJoin = _path => path.posix.join(assetsDir, _path);
12 const lastVersion = new Date().getTime(); 12 const lastVersion = new Date().getTime();
13 const isProd = process.env.NODE_ENV === 'production'; 13 const isProd = process.env.NODE_ENV === 'production';
14 14
15 +// dns预加载，优化接口请求
16 +const dnsPrefetch = [
17 + 'https://cdn.jsdelivr.net',
18 + 'https://cdn.bootcss.com'
19 +];
20 +
15 // cdn预加载使用 21 // cdn预加载使用
16 const externals = { 22 const externals = {
17 'vue': 'Vue', 23 'vue': 'Vue',
18 'vue-router': 'VueRouter', 24 'vue-router': 'VueRouter',
19 'vuex': 'Vuex', 25 'vuex': 'Vuex',
20 'axios': 'axios', 26 'axios': 'axios',
21 - 'vant': 'Vant', 27 + 'vant': 'vant',
22 '$': 'jquery', 28 '$': 'jquery',
23 'jquery': 'Jquery', 29 'jquery': 'Jquery',
24 - 'moment': 'moment' 30 + 'moment': 'moment',
31 + '_': 'lodash',
32 + 'Fastclick': 'fastclick'
25 }; 33 };
26 34
27 const cdn = { 35 const cdn = {
...@@ -36,13 +44,15 @@ const cdn = { ...@@ -36,13 +44,15 @@ const cdn = {
36 'https://cdn.jsdelivr.net/npm/vant@1.5/lib/index.css' 44 'https://cdn.jsdelivr.net/npm/vant@1.5/lib/index.css'
37 ], 45 ],
38 js: [ 46 js: [
39 - 'https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js', 47 + 'https://cdn.bootcss.com/vue/2.5.21/vue.min.js',
40 - 'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js', 48 + 'https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js',
41 - 'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js', 49 + 'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
42 - 'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js', 50 + 'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
43 'https://cdn.jsdelivr.net/npm/vant@1.5/lib/vant.min.js', 51 'https://cdn.jsdelivr.net/npm/vant@1.5/lib/vant.min.js',
44 - 'https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js', 52 + 'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js',
45 - 'https://cdn.jsdelivr.net/npm/moment@2.23.0/moment.min.js' 53 + 'https://cdn.bootcss.com/moment.js/2.23.0/moment.min.js',
54 + 'https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js',
55 + 'https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js'
46 ] 56 ]
47 } 57 }
48 }; 58 };
...@@ -99,7 +109,7 @@ module.exports = { ...@@ -99,7 +109,7 @@ module.exports = {
99 // 放置生成的静态资源的目录 109 // 放置生成的静态资源的目录
100 assetsDir, 110 assetsDir,
101 // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。 111 // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
102 - indexPath: 'index.html', 112 + // indexPath: 'index.html',
103 filenameHashing: true, 113 filenameHashing: true,
104 pages, 114 pages,
105 // eslint-loader 是否在保存的时候检查 115 // eslint-loader 是否在保存的时候检查
...@@ -108,26 +118,29 @@ module.exports = { ...@@ -108,26 +118,29 @@ module.exports = {
108 runtimeCompiler: true, 118 runtimeCompiler: true,
109 // 生产环境是否生成 sourceMap 文件 119 // 生产环境是否生成 sourceMap 文件
110 productionSourceMap: false, 120 productionSourceMap: false,
111 - // vux 相关配置,使用vux-ui
112 // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。 121 // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
113 // 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。 122 // 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
114 configureWebpack: config => { 123 configureWebpack: config => {
115 config.plugins.push( 124 config.plugins.push(
116 new webpack.ProvidePlugin({ 125 new webpack.ProvidePlugin({
117 - $: 'jquery', 126 + 'vue': 'Vue',
118 - jQuery: 'jquery', 127 + '$': 'jquery',
128 + 'jQuery': 'jquery',
119 '_': 'lodash', 129 '_': 'lodash',
120 'axios': 'axios', 130 'axios': 'axios',
121 'moment': 'moment' 131 'moment': 'moment'
122 }) 132 })
123 ); 133 );
124 - config.resolve.extensions.push('.less'); 134 + //
125 - config.resolve.extensions.push('.css'); 135 + config.resolve.extensions = ['.js', '.vue', '.json', '.less', '.css'];
126 // 136 //
127 // config.resolve.alias.assets = path.resolve(__dirname, './src/assets'); 137 // config.resolve.alias.assets = path.resolve(__dirname, './src/assets');
128 // config.resolve.alias.components = path.resolve(__dirname, './src/components'); 138 // config.resolve.alias.components = path.resolve(__dirname, './src/components');
129 // 修改webpack config, 使其不打包externals下的资源 139 // 修改webpack config, 使其不打包externals下的资源
130 if (process.env.NODE_ENV === 'production') { 140 if (process.env.NODE_ENV === 'production') {
141 + // 生成环境执行task任务，写入版本号
142 + // const task = require('./task');
143 + // task.run(lastVersion);
131 // 1. 生产环境npm包转CDN 144 // 1. 生产环境npm包转CDN
132 config.externals = externals; 145 config.externals = externals;
133 // 2. 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip 146 // 2. 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip
...@@ -135,13 +148,15 @@ module.exports = { ...@@ -135,13 +148,15 @@ module.exports = {
135 config.plugins.push( 148 config.plugins.push(
136 new CompressionWebpackPlugin({ 149 new CompressionWebpackPlugin({
137 test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), 150 test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
138 - threshold: 8192, 151 + threshold: 10240,
139 minRatio: 0.8 152 minRatio: 0.8
140 }) 153 })
141 ); 154 );
142 } 155 }
143 } 156 }
144 if (process.env.NODE_ENV === 'development') { 157 if (process.env.NODE_ENV === 'development') {
158 + // 1. 生产环境npm包转CDN
159 + config.externals = externals;
145 } 160 }
146 }, 161 },
147 // 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。 162 // 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
...@@ -149,9 +164,9 @@ module.exports = { ...@@ -149,9 +164,9 @@ module.exports = {
149 /** 164 /**
150 * 删除懒加载模块的 prefetch preload，降低带宽压力 165 * 删除懒加载模块的 prefetch preload，降低带宽压力
151 */ 166 */
152 - config.plugins 167 + // config.plugins
153 - .delete('prefetch') 168 + // .delete('prefetch')
154 - .delete('preload'); 169 + // .delete('preload');
155 config.resolve.alias 170 config.resolve.alias
156 .set('vue$', 'vue/dist/vue.esm.js') 171 .set('vue$', 'vue/dist/vue.esm.js')
157 .set('@', resolve('src')) 172 .set('@', resolve('src'))
...@@ -182,16 +197,45 @@ module.exports = { ...@@ -182,16 +197,45 @@ module.exports = {
182 .plugin('html-index') 197 .plugin('html-index')
183 .tap(args => { 198 .tap(args => {
184 if (process.env.NODE_ENV === 'production') { 199 if (process.env.NODE_ENV === 'production') {
185 - args[0].cdn = cdn.build;
186 } 200 }
201 + args[0].cdn = cdn.build;
202 + args[0].dnsPrefetch = dnsPrefetch;
187 return args; 203 return args;
188 }) 204 })
189 .end() 205 .end()
190 .plugin('html-login') 206 .plugin('html-login')
191 .tap(args => { 207 .tap(args => {
192 if (process.env.NODE_ENV === 'production') { 208 if (process.env.NODE_ENV === 'production') {
193 - args[0].cdn = cdn.build;
194 } 209 }
210 + args[0].cdn = cdn.build;
211 + args[0].dnsPrefetch = dnsPrefetch;
212 + return args;
213 + })
214 + .end()
215 + .plugin('html-A')
216 + .tap(args => {
217 + if (process.env.NODE_ENV === 'production') {
218 + }
219 + args[0].cdn = cdn.build;
220 + args[0].dnsPrefetch = dnsPrefetch;
221 + return args;
222 + })
223 + .end()
224 + .plugin('html-B')
225 + .tap(args => {
226 + if (process.env.NODE_ENV === 'production') {
227 + }
228 + args[0].cdn = cdn.build;
229 + args[0].dnsPrefetch = dnsPrefetch;
230 + return args;
231 + })
232 + .end()
233 + .plugin('html-C')
234 + .tap(args => {
235 + if (process.env.NODE_ENV === 'production') {
236 + }
237 + args[0].cdn = cdn.build;
238 + args[0].dnsPrefetch = dnsPrefetch;
195 return args; 239 return args;
196 }) 240 })
197 .end(); 241 .end();
...@@ -256,6 +300,8 @@ module.exports = { ...@@ -256,6 +300,8 @@ module.exports = {
256 }, 300 },
257 // 第三方插件配置 301 // 第三方插件配置
258 pluginOptions: { 302 pluginOptions: {
259 - // ... 303 + // dll: {
304 + // entry: ['vue', 'vue-route', 'vuex', 'axios', 'vant', 'moment', 'lodash', 'jquery']
305 + // }
260 } 306 }
261 }; 307 };
......