-
css autoprefix的问题 @luchanan的方案，具体可以参考https://github.com/luchanan/vue2.0-multi-page
-
Issues#22多页面多路由进入子路由页面直接刷新出错 @Deguang提到需要做http server配置，文档地址http://router.vuejs.org/zh-cn/essentials/history-mode.html 我在dev-server.js中简单得修改了以下代码
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')({
rewrites: [
{ from: /\/add$/, to: '/module/index.html'},
{ from: /\/list$/, to: '/module/index.html'}
]
}))
- [Issues#21build之后的vendor.js把所有页面引入的库都放进去了]#21
以下修改方法并没有解决根本问题，只能控制vendor.js不会加载所有node_modules中的模块
在webpack.prod.conf.js中修改
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
})
改为
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors', // 将公共模块提取，生成名为`vendors`的chunk
chunks: ['index','info'], //提取哪些模块共有的部分
minChunks: 2 // 提取至少2个模块共有的部分
})
A Vue.js project
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm testvue2.0版本多页面入口,是由webpack配置来完成的 比如说，我的项目文件结构如下
webpack
|---build
|---src
|---assets 资源
|---components组件
|---module各个模块
|---index index模块
|---index.html
|---index.js
|---index.vue
|---info info模块
|---info.html
|---info.js
|---info.vue
修改webpack.base.conf.js文件
var glob = require('glob'); //这里的glob是nodejs的glob模块，是用来读取webpack入口目录文件的
var entries = getEntry('./src/module/**/*.js'); // 获得入口js文件
function getEntry(globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
entries[pathname] = entry;
});
console.log(entries);
return entries;
}
module.exports = {
entry: entries,
***
}
修改webpack.dev.conf.js文件
var glob = require('glob');
module.exports = merge(baseWebpackConfig, {
devtool: '#eval-source-map',
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
})
function getEntry(globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
entries[pathname] = entry;
});
console.log(entries);
return entries;
}
var pages = getEntry('./src/module/**/*.html');
for (var pathname in pages) {
// 配置生成的html文件，定义路径等
var conf = {
filename: pathname + '.html',
template: pages[pathname], // 模板路径
chunks: [pathname, 'vendor', 'manifest'], // 每个html引用的js模块
inject: true // js插入位置
};
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}
修改webpack.prod.conf.js文件
var glob = require('glob');
module.exports = merge(baseWebpackConfig, {
***
plugins: [
***
new webpack.optimize.OccurenceOrderPlugin(),
new ExtractTextPlugin(path.join(config.build.assetsSubDirectory, '[name].[contenthash].css'))
]
})
function getEntry(globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
entries[pathname] = entry;
});
console.log(entries);
return entries;
}
var pages = getEntry('./src/module/**/*.html');
for (var pathname in pages) {
console.log(pathname);
// 配置生成的html文件，定义路径等
var conf = {
// filename: pathname + '.html',
filename: pathname + '.html',
template: pages[pathname], // 模板路径
chunks: [pathname, 'vendor', 'manifest'], // 每个html引用的js模块
inject: true // js插入位置
};
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}