Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7f06b4a

Browse files
committed
feat: 支持打包后按页面输出
1 parent 5be3357 commit 7f06b4a

File tree

8 files changed

+108
-22
lines changed

8 files changed

+108
-22
lines changed

‎README.md

Lines changed: 68 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
> [Vue多页面](https://github.com/BiYuqi/vue-multiple-pages)配置实例
44
5+
## Features
6+
7+
- 打包后保持按页面输出
8+
- 每个页面有自己的css & js
9+
- 公共的js & css 在对应目录
10+
- 默认index页面打平构建
11+
512
## Mutiple Setting
613
```js
714
const path = require('path')
@@ -13,16 +20,16 @@ const generateEntries = () => {
1320
// 约定构建出的页面用folder名字,默认入口为每个页面的main.js
1421
const entryFilePaths = glob.sync(PATH_ENTRY + '/**/main.js')
1522
const entry = {}
16-
23+
1724
entryFilePaths.forEach((filePath) => {
18-
const filename = filePath.match(/([^/]+)\/main\.js$/)[1]
19-
entry[filename] = {
25+
const FILENAME = filePath.match(/([^/]+)\/main\.js$/)[1]
26+
entry[FILENAME] = {
2027
entry: filePath,
2128
template: 'public/index.html',
22-
filename: `${filename}.html`,
29+
filename: FILENAME==='index'?`${FILENAME}.html`:`${FILENAME}/${FILENAME}.html`,
2330
// title可不传,每个页面单独设置
24-
title: `${filename} Page`,
25-
chunks: ['chunk-vendors', 'chunk-common', filename]
31+
title: `${FILENAME} Page`,
32+
chunks: ['chunk-vendors', 'chunk-common', FILENAME]
2633
}
2734
})
2835

@@ -34,6 +41,61 @@ module.exports = {
3441
}
3542
```
3643

44+
## vue.config.js
45+
```js
46+
const path = require('path')
47+
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
48+
const { generateEntries } = require('./mutiple-entry')
49+
50+
const resolve = dir => path.join(__dirname, dir)
51+
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
52+
53+
module.exports = {
54+
publicPath: IS_PROD ? process.env.BASE_URL : '/',
55+
productionSourceMap: false,
56+
pages: generateEntries(),
57+
devServer: {
58+
open: true
59+
},
60+
chainWebpack: config => {
61+
// 添加别名
62+
config.resolve.alias
63+
.set('vue$', 'vue/dist/vue.esm.js')
64+
.set('@', resolve('src'))
65+
.set('@assets', resolve('src/assets'))
66+
.set('@buy', resolve('src/pages/buy'))
67+
.set('@rent', resolve('src/pages/rent'))
68+
.set('@index', resolve('src/pages/index'))
69+
.set('@common', resolve('src/components'))
70+
71+
// dev环境js处理
72+
if (!IS_PROD) {
73+
config.output
74+
.filename(bundle => {
75+
return bundle.chunk.name === 'index' ? 'js/[name].js' : '[name]/[name].js'
76+
})
77+
}
78+
79+
// build环境js & css处理
80+
if (IS_PROD) {
81+
config.output
82+
.filename(bundle => {
83+
return bundle.chunk.name === 'index' ? 'js/[name].[contenthash:8].js' : '[name]/[name].[contenthash:8].js'
84+
})
85+
86+
config.plugin('extract-css').use(MiniCssExtractPlugin, [
87+
{
88+
filename: bundle => {
89+
return bundle.chunk.name === 'index' ? 'css/[name].[contenthash:8].css' : '[name]/[name].[contenthash:8].css'
90+
},
91+
chunkFilename: 'css/[name].[contenthash:8].css'
92+
}
93+
])
94+
}
95+
}
96+
}
97+
```
98+
3799
## Usage
38100

39101
``` bash

‎mutiple-entry.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@ const generateEntries = () => {
77
// 约定构建出的页面用folder名字,默认入口为每个页面的main.js
88
const entryFilePaths = glob.sync(PATH_ENTRY + '/**/main.js')
99
const entry = {}
10-
10+
1111
entryFilePaths.forEach((filePath) => {
12-
const filename = filePath.match(/([^/]+)\/main\.js$/)[1]
13-
entry[filename] = {
12+
const FILENAME = filePath.match(/([^/]+)\/main\.js$/)[1]
13+
entry[FILENAME] = {
1414
entry: filePath,
1515
template: 'public/index.html',
16-
filename: `${filename}.html`,
16+
filename: FILENAME==='index' ? `${FILENAME}.html` : `${FILENAME}/${FILENAME}.html`,
1717
// title可不传,每个页面单独设置
18-
title: `${filename} Page`,
19-
chunks: ['chunk-vendors', 'chunk-common', filename]
18+
title: `${FILENAME} Page`,
19+
chunks: ['chunk-vendors', 'chunk-common', FILENAME]
2020
}
2121
})
2222

‎src/pages/buy/components/HomePage.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515
</el-row>
1616
<el-row>
1717
<el-button type="primary">
18-
<a href="index.html">跳转到多页面--Index Page</a>
18+
<a href="/index.html">跳转到多页面--Index Page</a>
1919
</el-button>
2020
</el-row>
2121
<el-row>
2222
<el-button type="primary">
23-
<a href="rent.html">跳转到多页面--Rent Page</a>
23+
<a href="/rent/rent.html">跳转到多页面--Rent Page</a>
2424
</el-button>
2525
</el-row>
2626
</el-card>

‎src/pages/buy/components/WithRouter.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
</el-row>
1010
<el-row>
1111
<el-button type="primary">
12-
<a href="index.html">跳转到多页面--Index Page</a>
12+
<a href="/index.html">跳转到多页面--Index Page</a>
1313
</el-button>
1414
</el-row>
1515
<el-row>
1616
<el-button type="primary">
17-
<a href="rent.html">跳转到多页面--Rent Page</a>
17+
<a href="/rent/rent.html">跳转到多页面--Rent Page</a>
1818
</el-button>
1919
</el-row>
2020
</el-card>

‎src/pages/index/components/HomePage.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515
</el-row>
1616
<el-row>
1717
<el-button type="primary">
18-
<a href="buy.html">跳转到多页面--Buy Page</a>
18+
<a href="/buy/buy.html">跳转到多页面--Buy Page</a>
1919
</el-button>
2020
</el-row>
2121
<el-row>
2222
<el-button type="primary">
23-
<a href="rent.html">跳转到多页面--Rent Page</a>
23+
<a href="/rent/rent.html">跳转到多页面--Rent Page</a>
2424
</el-button>
2525
</el-row>
2626
</el-card>

‎src/pages/index/components/WithRouter.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
</el-row>
1010
<el-row>
1111
<el-button type="primary">
12-
<a href="buy.html">跳转到多页面--Buy Page</a>
12+
<a href="/buy/buy.html">跳转到多页面--Buy Page</a>
1313
</el-button>
1414
</el-row>
1515
<el-row>
1616
<el-button type="primary">
17-
<a href="rent.html">跳转到多页面--Rent Page</a>
17+
<a href="/rent/rent.html">跳转到多页面--Rent Page</a>
1818
</el-button>
1919
</el-row>
2020
</el-card>

‎src/pages/rent/components/HomePage.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515
</el-row>
1616
<el-row>
1717
<el-button type="primary">
18-
<a href="index.html">跳转到多页面--Index Page</a>
18+
<a href="/index.html">跳转到多页面--Index Page</a>
1919
</el-button>
2020
</el-row>
2121
<el-row>
2222
<el-button type="primary">
23-
<a href="rent.html">跳转到多页面--Rent Page</a>
23+
<a href="/buy/buy.html">跳转到多页面--Buy Page</a>
2424
</el-button>
2525
</el-row>
2626
</el-card>

‎vue.config.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const path = require('path')
2+
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
23
const { generateEntries } = require('./mutiple-entry')
34

45
const resolve = dir => path.join(__dirname, dir)
@@ -21,5 +22,28 @@ module.exports = {
2122
.set('@rent', resolve('src/pages/rent'))
2223
.set('@index', resolve('src/pages/index'))
2324
.set('@common', resolve('src/components'))
25+
26+
if (!IS_PROD) {
27+
config.output
28+
.filename(bundle => {
29+
return bundle.chunk.name === 'index' ? 'js/[name].js' : '[name]/[name].js'
30+
})
31+
}
32+
33+
if (IS_PROD) {
34+
config.output
35+
.filename(bundle => {
36+
return bundle.chunk.name === 'index' ? 'js/[name].[contenthash:8].js' : '[name]/[name].[contenthash:8].js'
37+
})
38+
39+
config.plugin('extract-css').use(MiniCssExtractPlugin, [
40+
{
41+
filename: bundle => {
42+
return bundle.chunk.name === 'index' ? 'css/[name].[contenthash:8].css' : '[name]/[name].[contenthash:8].css'
43+
},
44+
chunkFilename: 'css/[name].[contenthash:8].css'
45+
}
46+
])
47+
}
2448
}
2549
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /