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 220 additions and 58 deletions
var dev = [{
var dev = [
{
title: '登录页',
page: 'login'
}];
},
{
title: 'A',
page: 'A'
},
{
title: 'B',
page: 'B'
},
{
title: 'C',
page: 'C'
}
];
module.exports = dev;
......
var prod = [{
var prod = [
{
title: '登录页',
page: 'login'
}];
},
{
title: 'A',
page: 'A'
},
{
title: 'B',
page: 'B'
},
{
title: 'C',
page: 'C'
}
];
module.exports = prod;
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
<% 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><%= htmlWebpackPlugin.options.title %></title>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"></script>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="A"></div>
<!-- built files will be auto injected -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
<% 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><%= htmlWebpackPlugin.options.title %></title>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"></script>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="B"></div>
<!-- built files will be auto injected -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
<% 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><%= htmlWebpackPlugin.options.title %></title>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"></script>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="C"></div>
<!-- built files will be auto injected -->
</body>
</html>
......@@ -12,12 +12,12 @@
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"></script>
<% } %>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
......
......@@ -11,11 +11,12 @@
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"></script>
<% } %>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
......
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant'
import 'vant/lib/index.css'
/* jshint esversion: 6 */
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant)
Vue.use(Vant);
Vue.config.productionTip = false
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
}).$mount('#app');
......
// 多页面测试入口文件
import Vue from 'vue'
import Vuex from 'vuex'
import store from './vuex/store'
import router from './router'
import VueRouter from 'vue-router'
import axios from './http'
import A from './A.vue'
import { sync } from 'vuex-router-sync'
import FastClick from 'fastclick'
import Vant from 'vant'
import 'vant/lib/index.css'
/* jshint esversion: 6 */
import Vue from 'vue';
import Vuex from 'vuex';
import store from './vuex/store';
import router from './router';
import VueRouter from 'vue-router';
import axios from './http';
import A from './A.vue';
import { sync } from 'vuex-router-sync';
import FastClick from 'fastclick';
import Vant from 'vant';
import 'vant/lib/index.css';
sync(store, router)
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(Vant)
sync(store, router);
Vue.use(VueRouter);
Vue.use(Vuex);
Vue.use(Vant);
Vue.config.productionTip = false
Vue.prototype.method = function () {}
Vue.config.productionTip = false;
Vue.prototype.method = function () {};
FastClick.attach(document.body)
FastClick.attach(document.body);
new Vue({
store,
router,
axios,
render: h => h(A)
}).$mount('#A')
}).$mount('#A');
......
......@@ -27,6 +27,8 @@
<script>
export default {
mounted () {
},
data () {
return {
value: '',
......
......@@ -12,16 +12,24 @@ const posixJoin = _path => path.posix.join(assetsDir, _path);
const lastVersion = new Date().getTime();
const isProd = process.env.NODE_ENV === 'production';
// dns预加载，优化接口请求
const dnsPrefetch = [
'https://cdn.jsdelivr.net',
'https://cdn.bootcss.com'
];
// cdn预加载使用
const externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'vant': 'Vant',
'vant': 'vant',
'$': 'jquery',
'jquery': 'Jquery',
'moment': 'moment'
'moment': 'moment',
'_': 'lodash',
'Fastclick': 'fastclick'
};
const cdn = {
......@@ -36,13 +44,15 @@ const cdn = {
'https://cdn.jsdelivr.net/npm/vant@1.5/lib/index.css'
],
js: [
'https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js',
'https://cdn.bootcss.com/vue/2.5.21/vue.min.js',
'https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js',
'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
'https://cdn.jsdelivr.net/npm/vant@1.5/lib/vant.min.js',
'https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js',
'https://cdn.jsdelivr.net/npm/moment@2.23.0/moment.min.js'
'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js',
'https://cdn.bootcss.com/moment.js/2.23.0/moment.min.js',
'https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js',
'https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js'
]
}
};
......@@ -99,7 +109,7 @@ module.exports = {
// 放置生成的静态资源的目录
assetsDir,
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
indexPath: 'index.html',
// indexPath: 'index.html',
filenameHashing: true,
pages,
// eslint-loader 是否在保存的时候检查
......@@ -108,26 +118,29 @@ module.exports = {
runtimeCompiler: true,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// vux 相关配置,使用vux-ui
// 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
// 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
configureWebpack: config => {
config.plugins.push(
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'vue': 'Vue',
'$': 'jquery',
'jQuery': 'jquery',
'_': 'lodash',
'axios': 'axios',
'moment': 'moment'
})
);
config.resolve.extensions.push('.less');
config.resolve.extensions.push('.css');
//
config.resolve.extensions = ['.js', '.vue', '.json', '.less', '.css'];
//
// config.resolve.alias.assets = path.resolve(__dirname, './src/assets');
// config.resolve.alias.components = path.resolve(__dirname, './src/components');
// 修改webpack config, 使其不打包externals下的资源
if (process.env.NODE_ENV === 'production') {
// 生成环境执行task任务，写入版本号
// const task = require('./task');
// task.run(lastVersion);
// 1. 生产环境npm包转CDN
config.externals = externals;
// 2. 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip
......@@ -135,13 +148,15 @@ module.exports = {
config.plugins.push(
new CompressionWebpackPlugin({
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 8192,
threshold: 10240,
minRatio: 0.8
})
);
}
}
if (process.env.NODE_ENV === 'development') {
// 1. 生产环境npm包转CDN
config.externals = externals;
}
},
// 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
......@@ -149,9 +164,9 @@ module.exports = {
/**
* 删除懒加载模块的 prefetch preload，降低带宽压力
*/
config.plugins
.delete('prefetch')
.delete('preload');
// config.plugins
// .delete('prefetch')
// .delete('preload');
config.resolve.alias
.set('vue$', 'vue/dist/vue.esm.js')
.set('@', resolve('src'))
......@@ -182,16 +197,45 @@ module.exports = {
.plugin('html-index')
.tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn.build;
}
args[0].cdn = cdn.build;
args[0].dnsPrefetch = dnsPrefetch;
return args;
})
.end()
.plugin('html-login')
.tap(args => {
if (process.env.NODE_ENV === 'production') {
}
args[0].cdn = cdn.build;
args[0].dnsPrefetch = dnsPrefetch;
return args;
})
.end()
.plugin('html-A')
.tap(args => {
if (process.env.NODE_ENV === 'production') {
}
args[0].cdn = cdn.build;
args[0].dnsPrefetch = dnsPrefetch;
return args;
})
.end()
.plugin('html-B')
.tap(args => {
if (process.env.NODE_ENV === 'production') {
}
args[0].cdn = cdn.build;
args[0].dnsPrefetch = dnsPrefetch;
return args;
})
.end()
.plugin('html-C')
.tap(args => {
if (process.env.NODE_ENV === 'production') {
}
args[0].cdn = cdn.build;
args[0].dnsPrefetch = dnsPrefetch;
return args;
})
.end();
......@@ -256,6 +300,8 @@ module.exports = {
},
// 第三方插件配置
pluginOptions: {
// ...
// dll: {
// entry: ['vue', 'vue-route', 'vuex', 'axios', 'vant', 'moment', 'lodash', 'jquery']
// }
}
};
......