vue是目前灰常火的前端框架，但是我们在开发pc的web端时经常需要用到多页系统，而不是简单的单页系统，而vue-cli(最好用的脚手架)只有单页应用的的脚手架，要配置一个自己能用的vue多页应用的脚手架有以下修改的地方
├── build # build folder
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ ├── webpack.dll.conf.js
│ └── webpack.prod.conf.js
│
├── config # config part
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
│
├── static # static part
│
├── src # main folder
│ ├── assets # 公共静态资源
│ │ ├── img
│ │ │ └── logo.png
│ │ ├── js
│ │ └── css
│ │
│ ├── components # 公共组件
│ │ ├── Rule.vue
│ │ │
│ │ ├── Timedown.vue
│ │ │
│ │ ├── users.vue
│ │ │
│ │ ├── Gametime.vue
│ │ │
│ │ ├── toast
│ │ │ ├── index.js
│ │ │ └── toast.vue
│ │ │
│ │ └── loading
│ │ ├── index.js
│ │ └── loading.vue
│ │
│ ├── mock # 模拟数据
│ │
│ │
│ │
│ ├── utils # 公共方法
│ │ └── index.js
│ │
│ └── views # 路由页面
│ ├── create # create part
│ │ ├──create.html # create.html
│ │ ├──create.js # entry js
│ │ └──create.vue # create vue
│ │
│ │
│ ├── jinli # jinli part
│ │ ├──jinli.html # jinli.html
│ │ ├──jinli.js # entry js
│ │ └──jinli.vue # jinli vue
│ │
│ │
│ ├── money # money part
│ │ ├──money.html # money.html
│ │ ├──money.js # entry js
│ │ └──money.vue # money vue
│ │
│ │
│ ├── on # on part
│ │ ├──on.html # on.html
│ │ ├──on.js # entry js
│ │ └──on.vue # on vue
│ │
│ └── page # page part
│ │
│ ├──page.html # page.html
│ ├──page.js # entry js
│ └──page.vue # page vue
├── LICENSE
├── .babelrc # babel config (es2015 default)
├── .eslintrc.js # eslint config (eslint-config-vue default)
├── package.json
└── README.md1.改造 config/index.js
module.exports = {
build: {...},
dev: {...},
// 添加下面两项，根据自己要求配置
pageEntry: './src/views/**/*.js' // 多页应用入口
// pageEntry: './src/main.js' // 单页应用入口
}2.改造 build/utils.js
安装 npm install --save-dev glob 包
var glob = require('glob') // 引入glob包
// 在exports挂上俩个方法
// 获取路口方法
exports.getEntries = function () {
if (!/\*/.test(config.pageEntry)) {
// 单页入口处理
return {'index': config.pageEntry}
} else {
// 多页入口处理
var files = glob.sync(config.pageEntry)
var entries = {}
files.forEach(function (filepath) {
// 取倒数第二层(view下面的文件夹)做包名
var split = filepath.split('/')
var name = split[split.length - 2]
entries[name] = filepath
})
return entries
}
}
// connect-history-api-fallback 路由重写使用，
// https://github.com/bripkens/connect-history-api-fallback
exports.getRewrites = function () {
var entries = exports.getEntries()
var rewrites = []
Object.keys(entries).forEach(function (name) {
var reg = new RegExp('^\/' + name + '$')
rewrites.push({from: reg, to: '\/' + name + '.html'})
})
return rewrites
}3.改造 build/webpack.base.conf.js
...
module.exports = {
entry: utils.getEntries()
}
...4.改造 build/webpack.dev.conf.js
...
module.exports = {
...
plugins: [
...
// https://github.com/ampedandwired/html-webpack-plugin
/* 注释或者删除下面插件
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}), */
...
]
}
...
// 添加下面的处理
var entries = utils.getEntries()
Object.keys(entries).forEach(function (name) {
// 每个页面生成一个html
console.log(entries[name])
const chunk = entries[name].slice(entries[name].lastIndexOf('/')+1).split('.')[0];
var plugin = new HtmlWebpackPlugin({
// 输出为 模块名称+html
filename: name + '.html',
//(模板放置对应的目录中，若用通用模板，则写 ‘index.html’)
template: entries[name].slice(0, -3) + '.html',
inject: true,
hash: process.env.NODE_ENV === 'production',
chunks: ['vendors', chunk]
});
module.exports.plugins.push(plugin)
})5.改造 build/dev-server.js
// 引入utils包
var utils = require('./utils')
...
// 修改history，参数，使访问的效果如预期访问效果
// 访问xxxx/login.html -> xxxx/login
app.use(require('connect-history-api-fallback')(
{rewrites: utils.getRewrites()}
))
...6.改造 build/webpack.prod.conf.js
...
var webpackConfig = merge(baseWebpackConfig, {
...
/* 注释或者删除下面插件
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),*/
...
})
// 添加下面的处理
var entries = utils.getEntries()
Object.keys(entries).forEach(function (name) {
// 每个页面生成一个html
var plugin = new HtmlWebpackPlugin({
filename: name + '.html',
template: entries[name].slice(0, -3) + '.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
// 每个包引入自己的依赖，公共依赖
chunks: ['manifest', 'vendor', name],
hash: true
});
webpackConfig.plugins.push(plugin)
})cdn引入Vue.js v2.5.2
# 安装依赖的库
npm install
# 开发环境
npm run dev
# 生产环境
npm run build
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent