├── .gitignore ├── 6. 优化 └── demo │ ├── src │ ├── styles │ │ ├── main.css │ │ ├── main.styl │ │ └── font.css │ ├── imgs │ │ ├── 心.png │ │ ├── 赞.png │ │ ├── 分享.png │ │ ├── 多啦A梦.jpg │ │ ├── 心-实.png │ │ ├── 搜索.png │ │ ├── 添加.png │ │ └── 箭头.png │ ├── fonts │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ ├── store │ │ ├── modules │ │ │ ├── permission.js │ │ │ └── user.js │ │ ├── getter.js │ │ └── index.js │ ├── utils │ │ └── index.js │ ├── App.vue │ ├── main.js │ ├── views │ │ ├── home │ │ │ └── main.vue │ │ └── page-a │ │ │ └── main.vue │ └── router │ │ └── index.js │ ├── postcss.config.js │ ├── .editorconfig │ ├── build │ ├── config.js │ ├── webpack.dll.conf.js │ ├── webpack.dev.conf.js │ ├── build.js │ ├── utils.js │ └── webpack.prod.conf.js │ ├── nginx-conf │ ├── conf │ │ ├── 8001-official-website.conf │ │ ├── 8082-static.conf │ │ ├── 8081-staticTest.conf │ │ ├── 8010-iop.conf │ │ ├── 80-dev-server-api.conf │ │ └── 9000-sale-cloud.conf │ ├── scgi_params │ ├── uwsgi_params │ ├── fastcgi_params │ ├── fastcgi.conf │ ├── nginx.conf │ ├── koi-win │ └── koi-utf │ ├── .babelrc │ ├── index.html │ ├── .eslintrc.js │ └── package.json ├── 5. 开发服务 ├── demo │ ├── src │ │ ├── styles │ │ │ ├── main.css │ │ │ ├── main.styl │ │ │ └── font.css │ │ ├── imgs │ │ │ ├── 分享.png │ │ │ ├── 心.png │ │ │ ├── 搜索.png │ │ │ ├── 添加.png │ │ │ ├── 箭头.png │ │ │ ├── 赞.png │ │ │ ├── 多啦A梦.jpg │ │ │ └── 心-实.png │ │ ├── fonts │ │ │ ├── iconfont.eot │ │ │ ├── iconfont.ttf │ │ │ └── iconfont.woff │ │ ├── store │ │ │ ├── modules │ │ │ │ ├── permission.js │ │ │ │ └── user.js │ │ │ ├── getter.js │ │ │ └── index.js │ │ ├── main.js │ │ ├── views │ │ │ ├── home │ │ │ │ └── main.vue │ │ │ └── page-a │ │ │ │ └── main.vue │ │ ├── App.vue │ │ └── router │ │ │ └── index.js │ ├── postcss.config.js │ ├── build │ │ ├── config.js │ │ ├── webpack.prod.conf.js │ │ ├── webpack.dev.conf.js │ │ ├── build.js │ │ ├── utils.js │ │ └── webpack.base.conf.js │ ├── index.html │ ├── nginx-conf │ │ ├── conf │ │ │ ├── 8001-official-website.conf │ │ │ ├── 8082-static.conf │ │ │ ├── 8081-staticTest.conf │ │ │ ├── 8010-iop.conf │ │ │ ├── 80-dev-server-api.conf │ │ │ └── 9000-sale-cloud.conf │ │ ├── scgi_params │ │ ├── uwsgi_params │ │ ├── fastcgi_params │ │ ├── fastcgi.conf │ │ ├── nginx.conf │ │ ├── koi-win │ │ └── koi-utf │ └── package.json └── serverDemo │ ├── package.json │ ├── router │ └── index.js │ └── app.js ├── 7. 微前端方案 └── demo │ ├── src │ ├── styles │ │ ├── main.css │ │ ├── main.styl │ │ └── font.css │ ├── imgs │ │ ├── 心.png │ │ ├── 赞.png │ │ ├── 分享.png │ │ ├── 心-实.png │ │ ├── 搜索.png │ │ ├── 添加.png │ │ ├── 箭头.png │ │ └── 多啦A梦.jpg │ ├── fonts │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ ├── modules │ │ ├── mod-b │ │ │ ├── store │ │ │ │ ├── getters.js │ │ │ │ ├── modules │ │ │ │ │ └── app.js │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── views │ │ │ │ ├── function-a │ │ │ │ │ ├── page-a.vue │ │ │ │ │ └── page-b.vue │ │ │ │ └── function-b │ │ │ │ │ └── page-a.vue │ │ │ └── router │ │ │ │ └── index.js │ │ └── mod-a │ │ │ ├── store │ │ │ ├── modules │ │ │ │ └── app.js │ │ │ ├── getters.js │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── views │ │ │ ├── function-a │ │ │ │ ├── page-a.vue │ │ │ │ └── page-b.vue │ │ │ └── function-b │ │ │ │ └── page-a.vue │ │ │ └── router │ │ │ └── index.js │ ├── store │ │ ├── modules │ │ │ ├── permission.js │ │ │ └── user.js │ │ ├── getter.js │ │ └── index.js │ ├── utils │ │ ├── index.js │ │ ├── api │ │ │ ├── base.js │ │ │ └── base.json │ │ └── module.js │ ├── main.js │ ├── App.vue │ ├── views │ │ └── index │ │ │ └── main.vue │ └── router │ │ └── index.js │ ├── postcss.config.js │ ├── .editorconfig │ ├── build │ ├── config.js │ ├── webpack.dll.conf.js │ ├── webpack.dev.conf.js │ ├── build.js │ ├── utils.js │ ├── webpack.mod.conf.js │ └── webpack.prod.conf.js │ ├── .babelrc │ ├── nginx-conf │ ├── conf │ │ ├── 8001-official-website.conf │ │ ├── 8082-static.conf │ │ ├── 8081-staticTest.conf │ │ ├── 8010-iop.conf │ │ ├── 80-dev-server-api.conf │ │ └── 9000-sale-cloud.conf │ ├── scgi_params │ ├── uwsgi_params │ ├── fastcgi_params │ ├── fastcgi.conf │ ├── nginx.conf │ ├── koi-win │ └── koi-utf │ ├── index.html │ ├── .eslintrc.js │ ├── modules │ ├── mod-a │ │ ├── mod-a │ │ │ ├── function-a │ │ │ │ ├── page-a.7ae13.chunk.js │ │ │ │ └── page-b.19aef.chunk.js │ │ │ └── function-b │ │ │ │ └── page-a.9501e.chunk.js │ │ └── mod-a.js │ └── mod-b │ │ ├── mod-b │ │ ├── function-a │ │ │ ├── page-a.ff890.chunk.js │ │ │ └── page-b.d180c.chunk.js │ │ └── function-b │ │ │ └── page-a.472b7.chunk.js │ │ └── mod-b.js │ └── package.json ├── 8. 编写自己的 Loader 和 Plugin └── demo │ ├── hello-world.js │ ├── helloLoader │ ├── index.js │ └── async-index.js │ ├── helloPlugin │ ├── index.js │ └── copyright.js │ ├── package.json │ └── webpack.config.js ├── 4. 处理 vue 文件 └── demo │ ├── src │ ├── styles │ │ ├── main.css │ │ ├── main.styl │ │ └── font.css │ ├── imgs │ │ ├── 分享.png │ │ ├── 心.png │ │ ├── 搜索.png │ │ ├── 添加.png │ │ ├── 箭头.png │ │ ├── 赞.png │ │ ├── 多啦A梦.jpg │ │ └── 心-实.png │ ├── fonts │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ ├── store │ │ ├── modules │ │ │ ├── permission.js │ │ │ └── user.js │ │ ├── getter.js │ │ └── index.js │ ├── main.js │ ├── views │ │ ├── home │ │ │ └── main.vue │ │ └── page-a │ │ │ └── main.vue │ ├── App.vue │ └── router │ │ └── index.js │ ├── postcss.config.js │ ├── index.html │ ├── nginx-conf │ ├── conf │ │ ├── 8001-official-website.conf │ │ ├── 8082-static.conf │ │ ├── 8081-staticTest.conf │ │ ├── 8010-iop.conf │ │ ├── 80-dev-server-api.conf │ │ └── 9000-sale-cloud.conf │ ├── scgi_params │ ├── uwsgi_params │ ├── fastcgi_params │ ├── fastcgi.conf │ ├── nginx.conf │ └── koi-win │ ├── package.json │ └── webpack.config.js ├── 3. 处理图片、样式和字体 └── demo │ ├── src │ ├── styles │ │ ├── main.styl │ │ ├── main.css │ │ └── font.css │ ├── imgs │ │ ├── 心.png │ │ ├── 赞.png │ │ ├── 分享.png │ │ ├── 心-实.png │ │ ├── 搜索.png │ │ ├── 添加.png │ │ ├── 箭头.png │ │ └── 多啦A梦.jpg │ ├── fonts │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ └── main.js │ ├── postcss.config.js │ ├── package.json │ └── webpack.config.js ├── 1. 起步 ├── src.js ├── webpack.config.js └── 起步.md ├── 2. 处理 html ├── src.js ├── webpack.config.js └── package.json ├── .editorconfig ├── 资料备份.md ├── .vscode └── launch.json └── 0. 导读 └── 导读.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | dll/ 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /6. 优化/demo/src/styles/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /5. 开发服务/demo/src/styles/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/styles/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /8. 编写自己的 Loader 和 Plugin/demo/hello-world.js: -------------------------------------------------------------------------------- 1 | console.log('Hello World!') 2 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/styles/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /6. 优化/demo/src/styles/main.styl: -------------------------------------------------------------------------------- 1 | body { 2 | transform rotate(-5deg) 3 | } 4 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/styles/main.styl: -------------------------------------------------------------------------------- 1 | body { 2 | transform rotate(-5deg) 3 | } 4 | -------------------------------------------------------------------------------- /5. 开发服务/demo/src/styles/main.styl: -------------------------------------------------------------------------------- 1 | body { 2 | background red 3 | transform rotate(180deg) 4 | } 5 | -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/styles/main.styl: -------------------------------------------------------------------------------- 1 | body { 2 | background red 3 | transform rotate(180deg) 4 | } 5 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/styles/main.styl: -------------------------------------------------------------------------------- 1 | body { 2 | background red 3 | transform rotate(180deg) 4 | } 5 | -------------------------------------------------------------------------------- /5. 开发服务/demo/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /6. 优化/demo/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /6. 优化/demo/src/imgs/心.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/6. 优化/demo/src/imgs/心.png -------------------------------------------------------------------------------- /6. 优化/demo/src/imgs/赞.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/6. 优化/demo/src/imgs/赞.png -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/styles/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | background: url("../imgs/多啦A梦.jpg"); 4 | } 5 | -------------------------------------------------------------------------------- /5. 开发服务/demo/src/imgs/分享.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/5. 开发服务/demo/src/imgs/分享.png -------------------------------------------------------------------------------- /5. 开发服务/demo/src/imgs/心.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/5. 开发服务/demo/src/imgs/心.png -------------------------------------------------------------------------------- /5. 开发服务/demo/src/imgs/搜索.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/5. 开发服务/demo/src/imgs/搜索.png -------------------------------------------------------------------------------- /5. 开发服务/demo/src/imgs/添加.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/5. 开发服务/demo/src/imgs/添加.png -------------------------------------------------------------------------------- /5. 开发服务/demo/src/imgs/箭头.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/5. 开发服务/demo/src/imgs/箭头.png -------------------------------------------------------------------------------- /5. 开发服务/demo/src/imgs/赞.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/5. 开发服务/demo/src/imgs/赞.png -------------------------------------------------------------------------------- /6. 优化/demo/src/imgs/分享.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/6. 优化/demo/src/imgs/分享.png -------------------------------------------------------------------------------- /6. 优化/demo/src/imgs/多啦A梦.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/6. 优化/demo/src/imgs/多啦A梦.jpg -------------------------------------------------------------------------------- /6. 优化/demo/src/imgs/心-实.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/6. 优化/demo/src/imgs/心-实.png -------------------------------------------------------------------------------- /6. 优化/demo/src/imgs/搜索.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/6. 优化/demo/src/imgs/搜索.png -------------------------------------------------------------------------------- /6. 优化/demo/src/imgs/添加.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/6. 优化/demo/src/imgs/添加.png -------------------------------------------------------------------------------- /6. 优化/demo/src/imgs/箭头.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/6. 优化/demo/src/imgs/箭头.png -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/imgs/心.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/7. 微前端方案/demo/src/imgs/心.png -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/imgs/赞.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/7. 微前端方案/demo/src/imgs/赞.png -------------------------------------------------------------------------------- /5. 开发服务/demo/src/imgs/多啦A梦.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/5. 开发服务/demo/src/imgs/多啦A梦.jpg -------------------------------------------------------------------------------- /5. 开发服务/demo/src/imgs/心-实.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/5. 开发服务/demo/src/imgs/心-实.png -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/imgs/分享.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/7. 微前端方案/demo/src/imgs/分享.png -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/imgs/心-实.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/7. 微前端方案/demo/src/imgs/心-实.png -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/imgs/搜索.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/7. 微前端方案/demo/src/imgs/搜索.png -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/imgs/添加.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/7. 微前端方案/demo/src/imgs/添加.png -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/imgs/箭头.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/7. 微前端方案/demo/src/imgs/箭头.png -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/imgs/心.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/3. 处理图片、样式和字体/demo/src/imgs/心.png -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/imgs/赞.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/3. 处理图片、样式和字体/demo/src/imgs/赞.png -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/imgs/分享.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/4. 处理 vue 文件/demo/src/imgs/分享.png -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/imgs/心.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/4. 处理 vue 文件/demo/src/imgs/心.png -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/imgs/搜索.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/4. 处理 vue 文件/demo/src/imgs/搜索.png -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/imgs/添加.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/4. 处理 vue 文件/demo/src/imgs/添加.png -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/imgs/箭头.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/4. 处理 vue 文件/demo/src/imgs/箭头.png -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/imgs/赞.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/4. 处理 vue 文件/demo/src/imgs/赞.png -------------------------------------------------------------------------------- /5. 开发服务/serverDemo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "koa": "^2.7.0", 4 | "koa-router": "^7.4.0" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /6. 优化/demo/src/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/6. 优化/demo/src/fonts/iconfont.eot -------------------------------------------------------------------------------- /6. 优化/demo/src/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/6. 优化/demo/src/fonts/iconfont.ttf -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/imgs/多啦A梦.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/7. 微前端方案/demo/src/imgs/多啦A梦.jpg -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/imgs/分享.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/3. 处理图片、样式和字体/demo/src/imgs/分享.png -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/imgs/心-实.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/3. 处理图片、样式和字体/demo/src/imgs/心-实.png -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/imgs/搜索.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/3. 处理图片、样式和字体/demo/src/imgs/搜索.png -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/imgs/添加.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/3. 处理图片、样式和字体/demo/src/imgs/添加.png -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/imgs/箭头.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/3. 处理图片、样式和字体/demo/src/imgs/箭头.png -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/imgs/多啦A梦.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/4. 处理 vue 文件/demo/src/imgs/多啦A梦.jpg -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/imgs/心-实.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/4. 处理 vue 文件/demo/src/imgs/心-实.png -------------------------------------------------------------------------------- /5. 开发服务/demo/src/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/5. 开发服务/demo/src/fonts/iconfont.eot -------------------------------------------------------------------------------- /5. 开发服务/demo/src/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/5. 开发服务/demo/src/fonts/iconfont.ttf -------------------------------------------------------------------------------- /6. 优化/demo/src/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/6. 优化/demo/src/fonts/iconfont.woff -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/imgs/多啦A梦.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/3. 处理图片、样式和字体/demo/src/imgs/多啦A梦.jpg -------------------------------------------------------------------------------- /5. 开发服务/demo/src/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/5. 开发服务/demo/src/fonts/iconfont.woff -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/7. 微前端方案/demo/src/fonts/iconfont.eot -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/7. 微前端方案/demo/src/fonts/iconfont.ttf -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/7. 微前端方案/demo/src/fonts/iconfont.woff -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-b/store/getters.js: -------------------------------------------------------------------------------- 1 | const getters = { 2 | modBDes: state => state.app.des 3 | } 4 | export default getters 5 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/4. 处理 vue 文件/demo/src/fonts/iconfont.eot -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/4. 处理 vue 文件/demo/src/fonts/iconfont.ttf -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/3. 处理图片、样式和字体/demo/src/fonts/iconfont.eot -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/3. 处理图片、样式和字体/demo/src/fonts/iconfont.ttf -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/3. 处理图片、样式和字体/demo/src/fonts/iconfont.woff -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luwuer/webpack-project-training-docs/HEAD/4. 处理 vue 文件/demo/src/fonts/iconfont.woff -------------------------------------------------------------------------------- /5. 开发服务/demo/src/store/modules/permission.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | isSuperAdmin: false 4 | }, 5 | mutations: {}, 6 | actions: {} 7 | } -------------------------------------------------------------------------------- /6. 优化/demo/src/store/modules/permission.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | isSuperAdmin: false 4 | }, 5 | mutations: {}, 6 | actions: {} 7 | } -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-a/store/modules/app.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | des: 'This is module-A\'s store-state' 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-b/store/modules/app.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | des: 'This is module-B\'s store-state' 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/store/modules/permission.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | isSuperAdmin: false 4 | }, 5 | mutations: {}, 6 | actions: {} 7 | } -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/store/modules/permission.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | isSuperAdmin: false 4 | }, 5 | mutations: {}, 6 | actions: {} 7 | } -------------------------------------------------------------------------------- /6. 优化/demo/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = false 8 | insert_final_newline = false -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-a/index.js: -------------------------------------------------------------------------------- 1 | import router from './router/index.js' 2 | import store from './store/index.js' 3 | 4 | export { 5 | router, 6 | store, 7 | } 8 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-b/index.js: -------------------------------------------------------------------------------- 1 | import router from './router/index.js' 2 | import store from './store/index.js' 3 | 4 | export { 5 | router, 6 | store, 7 | } 8 | -------------------------------------------------------------------------------- /1. 起步/src.js: -------------------------------------------------------------------------------- 1 | function counter() { 2 | if (!counter.count) counter.count = 0 3 | counter.count++ 4 | } 5 | 6 | counter() 7 | counter() 8 | 9 | console.log(counter.count) 10 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = false 8 | insert_final_newline = true -------------------------------------------------------------------------------- /2. 处理 html/src.js: -------------------------------------------------------------------------------- 1 | function counter() { 2 | if (!counter.count) counter.count = 0 3 | counter.count++ 4 | } 5 | 6 | counter() 7 | counter() 8 | 9 | console.log(counter.count) 10 | -------------------------------------------------------------------------------- /5. 开发服务/serverDemo/router/index.js: -------------------------------------------------------------------------------- 1 | const router = require('koa-router')() 2 | 3 | router.get('/test', async ctx => { 4 | ctx.response.body = 'get test api' 5 | }) 6 | 7 | module.exports = router 8 | -------------------------------------------------------------------------------- /8. 编写自己的 Loader 和 Plugin/demo/helloLoader/index.js: -------------------------------------------------------------------------------- 1 | // 不能使用箭头函数，因为 Loader 函数中 this 指向 Loader Content 对象 2 | module.exports = function (content) { 3 | return content.replace(/World/g, 'Loader') 4 | } 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = crlf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-a/store/getters.js: -------------------------------------------------------------------------------- 1 | // getters 动态添加时不存在新的作用域，所以需要约定在命名时加上表示模块的唯一前缀，这里是 modA 2 | const getters = { 3 | modADes: state => state.app.des 4 | } 5 | export default getters 6 | -------------------------------------------------------------------------------- /6. 优化/demo/src/utils/index.js: -------------------------------------------------------------------------------- 1 | export function counter() { 2 | if (!counter.count) counter.count = 0 3 | counter.count++ 4 | } 5 | 6 | export function say(str) { 7 | console.log('say:', str) 8 | } 9 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/utils/index.js: -------------------------------------------------------------------------------- 1 | export function counter() { 2 | if (!counter.count) counter.count = 0 3 | counter.count++ 4 | } 5 | 6 | export function say(str) { 7 | console.log('say:', str) 8 | } 9 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-a/store/index.js: -------------------------------------------------------------------------------- 1 | import app from './modules/app' 2 | import getters from './getters' 3 | 4 | export default { 5 | modules: { 6 | app 7 | }, 8 | getters 9 | } 10 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-b/store/index.js: -------------------------------------------------------------------------------- 1 | import app from './modules/app' 2 | import getters from './getters' 3 | 4 | export default { 5 | modules: { 6 | app 7 | }, 8 | getters 9 | } 10 | -------------------------------------------------------------------------------- /5. 开发服务/demo/src/store/getter.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | // user 4 | userName: state => state.user.userName, 5 | userAge: state => state.user.userAge, 6 | // permission 7 | isSuperAdmin: state => state.permission.isSuperAdmin 8 | } -------------------------------------------------------------------------------- /6. 优化/demo/src/store/getter.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | // user 4 | userName: state => state.user.userName, 5 | userAge: state => state.user.userAge, 6 | // permission 7 | isSuperAdmin: state => state.permission.isSuperAdmin 8 | } -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/store/getter.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | // user 4 | userName: state => state.user.userName, 5 | userAge: state => state.user.userAge, 6 | // permission 7 | isSuperAdmin: state => state.permission.isSuperAdmin 8 | } -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/store/getter.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | // user 4 | userName: state => state.user.userName, 5 | userAge: state => state.user.userAge, 6 | // permission 7 | isSuperAdmin: state => state.permission.isSuperAdmin 8 | } -------------------------------------------------------------------------------- /8. 编写自己的 Loader 和 Plugin/demo/helloLoader/async-index.js: -------------------------------------------------------------------------------- 1 | module.exports = function (content) { 2 | let callback = this.async() 3 | setTimeout(() => { 4 | callback(null, content.replace(/World/g, 'Async Loader')) 5 | }, 3000) 6 | } 7 | -------------------------------------------------------------------------------- /1. 起步/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | entry: './src.js', 6 | output: { 7 | filename: 'dist.js', 8 | path: path.resolve(__dirname, './') 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /5. 开发服务/demo/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import router from './router' 4 | import store from './store' 5 | 6 | new Vue({ 7 | router, 8 | store, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import router from './router' 4 | import store from './store' 5 | 6 | new Vue({ 7 | router, 8 | store, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/views/home/main.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/views/page-a/main.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /8. 编写自己的 Loader 和 Plugin/demo/helloPlugin/index.js: -------------------------------------------------------------------------------- 1 | module.exports = class HelloPlugin { 2 | apply(compiler) { 3 | compiler.hooks.compilation.tap('HelloPlugin', compilation => { 4 | console.log('helloPlugin load successful') 5 | }) 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /5. 开发服务/demo/build/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | production: { 3 | // 是否生成渐进式WEB应用 (Progressive Web App) 4 | pwa: false, 5 | // 需要进行模块分析 6 | bundleAnalyzer: false, 7 | // 生成 sourceMap 8 | sourceMap: false 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /6. 优化/demo/build/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | production: { 3 | // 是否生成渐进式WEB应用 (Progressive Web App) 4 | pwa: false, 5 | // 需要进行模块分析 6 | bundleAnalyzer: false, 7 | // 生成 sourceMap 8 | sourceMap: false 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/build/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | production: { 3 | // 是否生成渐进式WEB应用 (Progressive Web App) 4 | pwa: false, 5 | // 需要进行模块分析 6 | bundleAnalyzer: false, 7 | // 生成 sourceMap 8 | sourceMap: true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/utils/api/base.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description 返回子模块有权限的路由 3 | * @param {String} modName 模块名 4 | */ 5 | const getRoutes = modName => { 6 | return import('./base.json').then(data => data[modName]) 7 | } 8 | 9 | export { 10 | getRoutes 11 | } 12 | -------------------------------------------------------------------------------- /资料备份.md: -------------------------------------------------------------------------------- 1 | # 目录设定 2 | - 写在前面 3 | - 使用指南 4 | 8 | - 打包样式和资源 9 | - 样式 10 | - 图片 11 | - 文字 12 | - 部署生成代码 13 | - 使用开发服务（降低调试成本） 14 | - 打包体积优化 - mode: production 15 | - 首屏加载优化 - splitChunksPlugin 16 | - 打包耗时优化 17 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-a/views/function-a/page-a.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-a/views/function-a/page-b.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-a/views/function-b/page-a.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-b/views/function-a/page-a.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-b/views/function-a/page-b.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-b/views/function-b/page-a.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /5. 开发服务/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 模块增量升级测试 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /5. 开发服务/demo/src/views/home/main.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | 16 | 21 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 模块增量升级测试 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /5. 开发服务/demo/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import user from './modules/user' 4 | import permission from './modules/permission' 5 | import getters from './getter' 6 | 7 | Vue.use(Vuex) 8 | 9 | export default new Vuex.Store({ 10 | modules: { 11 | user, 12 | permission 13 | }, 14 | getters 15 | }) 16 | -------------------------------------------------------------------------------- /6. 优化/demo/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import user from './modules/user' 4 | import permission from './modules/permission' 5 | import getters from './getter' 6 | 7 | Vue.use(Vuex) 8 | 9 | export default new Vuex.Store({ 10 | modules: { 11 | user, 12 | permission 13 | }, 14 | getters 15 | }) 16 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import user from './modules/user' 4 | import permission from './modules/permission' 5 | import getters from './getter' 6 | 7 | Vue.use(Vuex) 8 | 9 | export default new Vuex.Store({ 10 | modules: { 11 | user, 12 | permission 13 | }, 14 | getters 15 | }) 16 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import user from './modules/user' 4 | import permission from './modules/permission' 5 | import getters from './getter' 6 | 7 | Vue.use(Vuex) 8 | 9 | export default new Vuex.Store({ 10 | modules: { 11 | user, 12 | permission 13 | }, 14 | getters 15 | }) 16 | -------------------------------------------------------------------------------- /5. 开发服务/demo/src/views/page-a/main.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /2. 处理 html/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | 4 | module.exports = { 5 | mode: 'development', 6 | entry: './src.js', 7 | output: { 8 | filename: 'dist.js', 9 | path: path.resolve(__dirname, './dist') 10 | }, 11 | plugins:[ 12 | new HtmlWebpackPlugin() 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /5. 开发服务/demo/nginx-conf/conf/8001-official-website.conf: -------------------------------------------------------------------------------- 1 | # 官网 2 | server { 3 | listen 8001; 4 | server_name localhost; 5 | 6 | # 字符集 7 | charset utf-8; 8 | 9 | location / { 10 | root D:/本机软件/TortoiseSVN/repository/云英官网改版/server/webapp/; 11 | index index.html index.htm; 12 | try_files $uri $uri/ /index.html; #目录不存在则执行index.html 13 | } 14 | } -------------------------------------------------------------------------------- /6. 优化/demo/nginx-conf/conf/8001-official-website.conf: -------------------------------------------------------------------------------- 1 | # 官网 2 | server { 3 | listen 8001; 4 | server_name localhost; 5 | 6 | # 字符集 7 | charset utf-8; 8 | 9 | location / { 10 | root D:/本机软件/TortoiseSVN/repository/云英官网改版/server/webapp/; 11 | index index.html index.htm; 12 | try_files $uri $uri/ /index.html; #目录不存在则执行index.html 13 | } 14 | } -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/nginx-conf/conf/8001-official-website.conf: -------------------------------------------------------------------------------- 1 | # 官网 2 | server { 3 | listen 8001; 4 | server_name localhost; 5 | 6 | # 字符集 7 | charset utf-8; 8 | 9 | location / { 10 | root D:/本机软件/TortoiseSVN/repository/云英官网改版/server/webapp/; 11 | index index.html index.htm; 12 | try_files $uri $uri/ /index.html; #目录不存在则执行index.html 13 | } 14 | } -------------------------------------------------------------------------------- /6. 优化/demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "modules": false, 7 | "useBuiltIns": "usage", 8 | "targets": { 9 | "chrome": "58" 10 | }, 11 | "corejs": 2 12 | } 13 | ] 14 | ], 15 | "plugins": [ 16 | "@babel/plugin-syntax-dynamic-import" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "modules": false, 7 | "useBuiltIns": "usage", 8 | "targets": { 9 | "chrome": "58" 10 | }, 11 | "corejs": 2 12 | } 13 | ] 14 | ], 15 | "plugins": [ 16 | "@babel/plugin-syntax-dynamic-import" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/nginx-conf/conf/8001-official-website.conf: -------------------------------------------------------------------------------- 1 | # 官网 2 | server { 3 | listen 8001; 4 | server_name localhost; 5 | 6 | # 字符集 7 | charset utf-8; 8 | 9 | location / { 10 | root D:/本机软件/TortoiseSVN/repository/云英官网改版/server/webapp/; 11 | index index.html index.htm; 12 | try_files $uri $uri/ /index.html; #目录不存在则执行index.html 13 | } 14 | } -------------------------------------------------------------------------------- /5. 开发服务/demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /5. 开发服务/serverDemo/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 用于测试 file 协议访问 index.html 是否能请求到数据 3 | * 结论： 在开启跨域校验后可以取到数据 4 | */ 5 | 6 | const Koa = require('koa') 7 | const app = new Koa() 8 | const router = require('./router') 9 | 10 | app.use(router.routes()) 11 | 12 | app.listen(3000, () => { 13 | console.log('server is running at http://localhost:3000.') 14 | console.log('ctrl + c to stop it.') 15 | }) 16 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-a/router/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | aa: () => import( /* webpackChunkName: "mod-a/function-a/page-a" */ `@mod-a/views/function-a/page-a`), 3 | ab: () => import( /* webpackChunkName: "mod-a/function-a/page-b" */ `@mod-a/views/function-a/page-b`), 4 | ba: () => import( /* webpackChunkName: "mod-a/function-b/page-a" */ `@mod-a/views/function-b/page-a`), 5 | } 6 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/modules/mod-b/router/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | aa: () => import( /* webpackChunkName: "mod-b/function-a/page-a" */ `@mod-b/views/function-a/page-a`), 3 | ab: () => import( /* webpackChunkName: "mod-b/function-a/page-b" */ `@mod-b/views/function-a/page-b`), 4 | ba: () => import( /* webpackChunkName: "mod-b/function-b/page-a" */ `@mod-b/views/function-b/page-a`), 5 | } 6 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /2. 处理 html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "html-webpack-plugin": "^3.2.0", 9 | "webpack": "^4.32.2" 10 | }, 11 | "scripts": { 12 | "test": "echo \"Error: no test specified\" && exit 1" 13 | }, 14 | "author": "", 15 | "license": "ISC" 16 | } 17 | -------------------------------------------------------------------------------- /6. 优化/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 模块增量升级测试 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /6. 优化/demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 22 | -------------------------------------------------------------------------------- /8. 编写自己的 Loader 和 Plugin/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "1.0.0", 4 | "auther": "hundsun", 5 | "description": "", 6 | "main": "index.js", 7 | "scripts": { 8 | "build": "webpack", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "webpack": "^4.35.3", 16 | "webpack-cli": "^3.3.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 模块增量升级测试 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /6. 优化/demo/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 'env': { 3 | 'browser': true, 4 | 'es6': true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'standard' 9 | ], 10 | 'globals': { 11 | 'Atomics': 'readonly', 12 | 'SharedArrayBuffer': 'readonly' 13 | }, 14 | 'parserOptions': { 15 | 'ecmaVersion': 2018, 16 | 'sourceType': 'module' 17 | }, 18 | 'plugins': [ 19 | 'vue' 20 | ], 21 | 'rules': { 22 | 'quotes': 'single', 23 | 'semi': 'never' 24 | } 25 | } -------------------------------------------------------------------------------- /6. 优化/demo/src/main.js: -------------------------------------------------------------------------------- 1 | // import _ from 'lodash' 2 | // import('lodash') 3 | // 预加载 4 | // import( /* webpackPreload: true, webpackChunkName: "dependencies/lodash" */ 'lodash') 5 | // 预取 6 | // import( /* webpackPrefetch: true, webpackChunkName: "dependencies/lodash" */ 'lodash') 7 | import Vue from 'vue' 8 | import App from './App' 9 | import router from './router' 10 | import store from './store' 11 | 12 | new Vue({ 13 | router, 14 | store, 15 | render: h => h(App) 16 | }).$mount('#app') 17 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 'env': { 3 | 'browser': true, 4 | 'es6': true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'standard' 9 | ], 10 | 'globals': { 11 | 'Atomics': 'readonly', 12 | 'SharedArrayBuffer': 'readonly' 13 | }, 14 | 'parserOptions': { 15 | 'ecmaVersion': 2018, 16 | 'sourceType': 'module' 17 | }, 18 | 'plugins': [ 19 | 'vue' 20 | ], 21 | 'rules': { 22 | 'quotes': 'single', 23 | 'semi': 'never' 24 | } 25 | } -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/main.js: -------------------------------------------------------------------------------- 1 | // import _ from 'lodash' 2 | // import('lodash') 3 | // 预加载 4 | // import( /* webpackPreload: true, webpackChunkName: "dependencies/lodash" */ 'lodash') 5 | // 预取 6 | // import( /* webpackPrefetch: true, webpackChunkName: "dependencies/lodash" */ 'lodash') 7 | import Vue from 'vue' 8 | import App from './App' 9 | import router from './router' 10 | import store from './store' 11 | 12 | new Vue({ 13 | router, 14 | store, 15 | render: h => h(App) 16 | }).$mount('#app') 17 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | 16 | 23 | -------------------------------------------------------------------------------- /6. 优化/demo/src/views/home/main.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 20 | 21 | 28 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [{ 7 | "type": "node", 8 | "request": "launch", 9 | "name": "Launch Program", 10 | "program": "${workspaceFolder}\\6. 优化\\demo\\build\\build.js", 11 | "cwd": "${workspaceFolder}\\6. 优化\\demo\\", 12 | "args": ["production"] 13 | }] 14 | } 15 | -------------------------------------------------------------------------------- /6. 优化/demo/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | export default new Router({ 7 | mode: 'history', 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'home', 12 | component: () => 13 | import(/* webpackChunkName: "views/home" */ '@/views/home/main.vue') 14 | }, 15 | { 16 | path: '/pa', 17 | name: 'pa', 18 | component: () => 19 | import(/* webpackChunkName: "views/page-a" */ '@/views/page-a/main.vue') 20 | } 21 | ] 22 | }) 23 | -------------------------------------------------------------------------------- /5. 开发服务/demo/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | export default new Router({ 7 | mode: 'history', 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'home', 12 | component: () => 13 | import(/* webpackChunkName: "views/home" */ '@/views/home/main.vue') 14 | }, 15 | { 16 | path: '/pa', 17 | name: 'pa', 18 | component: () => 19 | import(/* webpackChunkName: "views/page-a" */ '@/views/page-a/main.vue') 20 | } 21 | ] 22 | }) 23 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | export default new Router({ 7 | mode: 'history', 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'home', 12 | component: () => 13 | import(/* webpackChunkName: "views/home" */ '@/views/home/main.vue') 14 | }, 15 | { 16 | path: '/pa', 17 | name: 'pa', 18 | component: () => 19 | import(/* webpackChunkName: "views/page-a" */ '@/views/page-a/main.vue') 20 | } 21 | ] 22 | }) 23 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/utils/api/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "mod-a": [{ 3 | "name": "aa", 4 | "path": "/mod/a/a/a" 5 | }, 6 | { 7 | "name": "ab", 8 | "path": "/mod/a/a/b" 9 | }, 10 | { 11 | "name": "ba", 12 | "path": "/mod/a/b/a" 13 | } 14 | ], 15 | "mod-b": [{ 16 | "name": "aa", 17 | "path": "/mod/b/a/a" 18 | }, 19 | { 20 | "name": "ab", 21 | "path": "/mod/b/a/b" 22 | }, 23 | { 24 | "name": "ba", 25 | "path": "/mod/b/b/a" 26 | } 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /6. 优化/demo/src/styles/font.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: 'iconfont'; 2 | src: url('../fonts/iconfont.eot'); 3 | src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), 4 | url('../fonts/iconfont.woff') format('woff'), 5 | url('../fonts/iconfont.ttf') format('truetype'), 6 | url('../fonts/iconfont.svg#iconfont') format('svg'); 7 | } 8 | 9 | .iconfont{ 10 | font-family:"iconfont" !important; 11 | font-size:16px;font-style:normal; 12 | -webkit-font-smoothing: antialiased; 13 | -webkit-text-stroke-width: 0.2px; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | -------------------------------------------------------------------------------- /5. 开发服务/demo/src/styles/font.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: 'iconfont'; 2 | src: url('../fonts/iconfont.eot'); 3 | src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), 4 | url('../fonts/iconfont.woff') format('woff'), 5 | url('../fonts/iconfont.ttf') format('truetype'), 6 | url('../fonts/iconfont.svg#iconfont') format('svg'); 7 | } 8 | 9 | .iconfont{ 10 | font-family:"iconfont" !important; 11 | font-size:16px;font-style:normal; 12 | -webkit-font-smoothing: antialiased; 13 | -webkit-text-stroke-width: 0.2px; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/styles/font.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: 'iconfont'; 2 | src: url('../fonts/iconfont.eot'); 3 | src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), 4 | url('../fonts/iconfont.woff') format('woff'), 5 | url('../fonts/iconfont.ttf') format('truetype'), 6 | url('../fonts/iconfont.svg#iconfont') format('svg'); 7 | } 8 | 9 | .iconfont{ 10 | font-family:"iconfont" !important; 11 | font-size:16px;font-style:normal; 12 | -webkit-font-smoothing: antialiased; 13 | -webkit-text-stroke-width: 0.2px; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/styles/font.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: 'iconfont'; 2 | src: url('../fonts/iconfont.eot'); 3 | src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), 4 | url('../fonts/iconfont.woff') format('woff'), 5 | url('../fonts/iconfont.ttf') format('truetype'), 6 | url('../fonts/iconfont.svg#iconfont') format('svg'); 7 | } 8 | 9 | .iconfont{ 10 | font-family:"iconfont" !important; 11 | font-size:16px;font-style:normal; 12 | -webkit-font-smoothing: antialiased; 13 | -webkit-text-stroke-width: 0.2px; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/styles/font.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: 'iconfont'; 2 | src: url('../fonts/iconfont.eot'); 3 | src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), 4 | url('../fonts/iconfont.woff') format('woff'), 5 | url('../fonts/iconfont.ttf') format('truetype'), 6 | url('../fonts/iconfont.svg#iconfont') format('svg'); 7 | } 8 | 9 | .iconfont{ 10 | font-family:"iconfont" !important; 11 | font-size:16px;font-style:normal; 12 | -webkit-font-smoothing: antialiased; 13 | -webkit-text-stroke-width: 0.2px; 14 | -moz-osx-font-smoothing: grayscale; 15 | } 16 | -------------------------------------------------------------------------------- /8. 编写自己的 Loader 和 Plugin/demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | 2 | const path = require('path') 3 | const HelloPlugin = require('./helloPlugin/copyright.js') 4 | 5 | module.exports = { 6 | mode: 'development', 7 | entry: './hello-world.js', 8 | output: { 9 | filename: 'dist.js', 10 | path: path.resolve(__dirname, './') 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.js$/, 16 | use: [{ 17 | loader: path.resolve(__dirname, './helloLoader/index.js') 18 | }] 19 | } 20 | ] 21 | }, 22 | plugins: [ 23 | new HelloPlugin({ 24 | // banner: '123' 25 | }) 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /5. 开发服务/demo/src/store/modules/user.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | userName: 'admin', 4 | userAge: 18 5 | }, 6 | mutations: { 7 | setUserName(state, userInfo) { 8 | state.userName = userInfo.name 9 | }, 10 | setUserAge(state, userInfo) { 11 | state.userAge = userInfo.age 12 | } 13 | }, 14 | actions: { 15 | setUserInfo({ commit }) { 16 | // The real userInfo should to fetch api of your server 17 | let userInfo = { 18 | name: 'luwuer', 19 | age: 15 20 | } 21 | 22 | commit('setUserName', userInfo) 23 | commit('setUserAge', userInfo) 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /6. 优化/demo/src/store/modules/user.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | userName: 'admin', 4 | userAge: 18 5 | }, 6 | mutations: { 7 | setUserName(state, userInfo) { 8 | state.userName = userInfo.name 9 | }, 10 | setUserAge(state, userInfo) { 11 | state.userAge = userInfo.age 12 | } 13 | }, 14 | actions: { 15 | setUserInfo({ commit }) { 16 | // The real userInfo should to fetch api of your server 17 | let userInfo = { 18 | name: 'luwuer', 19 | age: 15 20 | } 21 | 22 | commit('setUserName', userInfo) 23 | commit('setUserAge', userInfo) 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /0. 导读/导读.md: -------------------------------------------------------------------------------- 1 | 本系列文章将从 Webpack 的基础使用开始，循序渐进，最终构建一个完整的前端项目 。本系列文章适宜人群： 2 | 3 | - 工作中用到 Webpack ，但并不关心其配置和打包过程的人 4 | 5 | 由于如今最常用的两个前端框架 react 和 vue 的脚手架都是基于 webpack 实现打包的，所以有很大一群人都使用着 Webpack 但对其并不是很了解。当遇到和打包相关的需求，要么摊摊手，要么被迫去单点查询解决方案，但由于在思路上还不清晰，通常都是困难重重。本系列文章就是对这群人量身定制，去讲解基础概念和实战使用，不会太难但很有用。 6 | 7 | - 项目前端负责人 8 | 9 | 看起来可能有点奇怪，前面才说过本文只讲基础概念，怎么又对我们老油条有用啦！其实是可以解释的，因为本文会构建的实战项目，在架构上属于**模块增量升级**，（我特意查了一下增量升级相关实现）本文做法属于孤例且对比起来是有优势的，可能会给你些许的启发。这种架构同目前各大电商平台使用的**模块独立部署**相比，订单模块、用户模块都有各自独立的子域名，也有一定的优势（比如单页体验、技术栈统一、公共资源共享）。 10 | 11 | 12 | **本系列文章仓库地址：[GitHub](https://github.com/luwuer/webpack-project-training-docs)** 13 | 14 | *项目构建基于 Webpack 4 ，项目基于 Vue* 15 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/src/store/modules/user.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | userName: 'admin', 4 | userAge: 18 5 | }, 6 | mutations: { 7 | setUserName(state, userInfo) { 8 | state.userName = userInfo.name 9 | }, 10 | setUserAge(state, userInfo) { 11 | state.userAge = userInfo.age 12 | } 13 | }, 14 | actions: { 15 | setUserInfo({ commit }) { 16 | // The real userInfo should to fetch api of your server 17 | let userInfo = { 18 | name: 'luwuer', 19 | age: 15 20 | } 21 | 22 | commit('setUserName', userInfo) 23 | commit('setUserAge', userInfo) 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/store/modules/user.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | userName: 'admin', 4 | userAge: 18 5 | }, 6 | mutations: { 7 | setUserName(state, userInfo) { 8 | state.userName = userInfo.name 9 | }, 10 | setUserAge(state, userInfo) { 11 | state.userAge = userInfo.age 12 | } 13 | }, 14 | actions: { 15 | setUserInfo({ commit }) { 16 | // The real userInfo should to fetch api of your server 17 | let userInfo = { 18 | name: 'luwuer', 19 | age: 15 20 | } 21 | 22 | commit('setUserName', userInfo) 23 | commit('setUserAge', userInfo) 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "autoprefixer": "^9.6.0", 9 | "css-loader": "^3.0.0", 10 | "file-loader": "^4.0.0", 11 | "html-webpack-plugin": "^3.2.0", 12 | "mini-css-extract-plugin": "^0.7.0", 13 | "postcss-loader": "^3.0.0", 14 | "style-loader": "^0.23.1", 15 | "stylus": "^0.54.5", 16 | "stylus-loader": "^3.0.2", 17 | "url-loader": "^2.0.1", 18 | "webpack": "^4.32.2" 19 | }, 20 | "scripts": { 21 | "test": "echo \"Error: no test specified\" && exit 1" 22 | }, 23 | "author": "", 24 | "license": "ISC" 25 | } 26 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/views/index/main.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 27 | 28 | 31 | -------------------------------------------------------------------------------- /5. 开发服务/demo/nginx-conf/scgi_params: -------------------------------------------------------------------------------- 1 | 2 | scgi_param REQUEST_METHOD $request_method; 3 | scgi_param REQUEST_URI $request_uri; 4 | scgi_param QUERY_STRING $query_string; 5 | scgi_param CONTENT_TYPE $content_type; 6 | 7 | scgi_param DOCUMENT_URI $document_uri; 8 | scgi_param DOCUMENT_ROOT $document_root; 9 | scgi_param SCGI 1; 10 | scgi_param SERVER_PROTOCOL $server_protocol; 11 | scgi_param REQUEST_SCHEME $scheme; 12 | scgi_param HTTPS $https if_not_empty; 13 | 14 | scgi_param REMOTE_ADDR $remote_addr; 15 | scgi_param REMOTE_PORT $remote_port; 16 | scgi_param SERVER_PORT $server_port; 17 | scgi_param SERVER_NAME $server_name; 18 | -------------------------------------------------------------------------------- /6. 优化/demo/build/webpack.dll.conf.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const { CleanWebpackPlugin } = require('clean-webpack-plugin') 3 | const { resolve } = require('./utils') 4 | 5 | const libs = { 6 | _frame: ['vue', 'vue-router', 'vuex'] 7 | } 8 | 9 | module.exports = { 10 | mode: 'production', 11 | entry: { ...libs }, 12 | performance: false, 13 | output: { 14 | path: resolve('dll'), 15 | filename: '[name].dll.js', 16 | library: '[name]' // 与 DllPlugin.name 保持一致 17 | }, 18 | plugins: [ 19 | new CleanWebpackPlugin(), 20 | new webpack.DllPlugin({ 21 | name: '[name]', 22 | path: resolve('dll', '[name].manifest.json'), 23 | context: resolve('') 24 | }) 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /6. 优化/demo/nginx-conf/scgi_params: -------------------------------------------------------------------------------- 1 | 2 | scgi_param REQUEST_METHOD $request_method; 3 | scgi_param REQUEST_URI $request_uri; 4 | scgi_param QUERY_STRING $query_string; 5 | scgi_param CONTENT_TYPE $content_type; 6 | 7 | scgi_param DOCUMENT_URI $document_uri; 8 | scgi_param DOCUMENT_ROOT $document_root; 9 | scgi_param SCGI 1; 10 | scgi_param SERVER_PROTOCOL $server_protocol; 11 | scgi_param REQUEST_SCHEME $scheme; 12 | scgi_param HTTPS $https if_not_empty; 13 | 14 | scgi_param REMOTE_ADDR $remote_addr; 15 | scgi_param REMOTE_PORT $remote_port; 16 | scgi_param SERVER_PORT $server_port; 17 | scgi_param SERVER_NAME $server_name; 18 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/build/webpack.dll.conf.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const { CleanWebpackPlugin } = require('clean-webpack-plugin') 3 | const { resolve } = require('./utils') 4 | 5 | const libs = { 6 | _frame: ['vue', 'vue-router', 'vuex'] 7 | } 8 | 9 | module.exports = { 10 | mode: 'production', 11 | entry: { ...libs }, 12 | performance: false, 13 | output: { 14 | path: resolve('dll'), 15 | filename: '[name].dll.js', 16 | library: '[name]' // 与 DllPlugin.name 保持一致 17 | }, 18 | plugins: [ 19 | new CleanWebpackPlugin(), 20 | new webpack.DllPlugin({ 21 | name: '[name]', 22 | path: resolve('dll', '[name].manifest.json'), 23 | context: resolve('') 24 | }) 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/nginx-conf/scgi_params: -------------------------------------------------------------------------------- 1 | 2 | scgi_param REQUEST_METHOD $request_method; 3 | scgi_param REQUEST_URI $request_uri; 4 | scgi_param QUERY_STRING $query_string; 5 | scgi_param CONTENT_TYPE $content_type; 6 | 7 | scgi_param DOCUMENT_URI $document_uri; 8 | scgi_param DOCUMENT_ROOT $document_root; 9 | scgi_param SCGI 1; 10 | scgi_param SERVER_PROTOCOL $server_protocol; 11 | scgi_param REQUEST_SCHEME $scheme; 12 | scgi_param HTTPS $https if_not_empty; 13 | 14 | scgi_param REMOTE_ADDR $remote_addr; 15 | scgi_param REMOTE_PORT $remote_port; 16 | scgi_param SERVER_PORT $server_port; 17 | scgi_param SERVER_NAME $server_name; 18 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/nginx-conf/scgi_params: -------------------------------------------------------------------------------- 1 | 2 | scgi_param REQUEST_METHOD $request_method; 3 | scgi_param REQUEST_URI $request_uri; 4 | scgi_param QUERY_STRING $query_string; 5 | scgi_param CONTENT_TYPE $content_type; 6 | 7 | scgi_param DOCUMENT_URI $document_uri; 8 | scgi_param DOCUMENT_ROOT $document_root; 9 | scgi_param SCGI 1; 10 | scgi_param SERVER_PROTOCOL $server_protocol; 11 | scgi_param REQUEST_SCHEME $scheme; 12 | scgi_param HTTPS $https if_not_empty; 13 | 14 | scgi_param REMOTE_ADDR $remote_addr; 15 | scgi_param REMOTE_PORT $remote_port; 16 | scgi_param SERVER_PORT $server_port; 17 | scgi_param SERVER_NAME $server_name; 18 | -------------------------------------------------------------------------------- /5. 开发服务/demo/nginx-conf/uwsgi_params: -------------------------------------------------------------------------------- 1 | 2 | uwsgi_param QUERY_STRING $query_string; 3 | uwsgi_param REQUEST_METHOD $request_method; 4 | uwsgi_param CONTENT_TYPE $content_type; 5 | uwsgi_param CONTENT_LENGTH $content_length; 6 | 7 | uwsgi_param REQUEST_URI $request_uri; 8 | uwsgi_param PATH_INFO $document_uri; 9 | uwsgi_param DOCUMENT_ROOT $document_root; 10 | uwsgi_param SERVER_PROTOCOL $server_protocol; 11 | uwsgi_param REQUEST_SCHEME $scheme; 12 | uwsgi_param HTTPS $https if_not_empty; 13 | 14 | uwsgi_param REMOTE_ADDR $remote_addr; 15 | uwsgi_param REMOTE_PORT $remote_port; 16 | uwsgi_param SERVER_PORT $server_port; 17 | uwsgi_param SERVER_NAME $server_name; 18 | -------------------------------------------------------------------------------- /6. 优化/demo/nginx-conf/uwsgi_params: -------------------------------------------------------------------------------- 1 | 2 | uwsgi_param QUERY_STRING $query_string; 3 | uwsgi_param REQUEST_METHOD $request_method; 4 | uwsgi_param CONTENT_TYPE $content_type; 5 | uwsgi_param CONTENT_LENGTH $content_length; 6 | 7 | uwsgi_param REQUEST_URI $request_uri; 8 | uwsgi_param PATH_INFO $document_uri; 9 | uwsgi_param DOCUMENT_ROOT $document_root; 10 | uwsgi_param SERVER_PROTOCOL $server_protocol; 11 | uwsgi_param REQUEST_SCHEME $scheme; 12 | uwsgi_param HTTPS $https if_not_empty; 13 | 14 | uwsgi_param REMOTE_ADDR $remote_addr; 15 | uwsgi_param REMOTE_PORT $remote_port; 16 | uwsgi_param SERVER_PORT $server_port; 17 | uwsgi_param SERVER_NAME $server_name; 18 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/nginx-conf/uwsgi_params: -------------------------------------------------------------------------------- 1 | 2 | uwsgi_param QUERY_STRING $query_string; 3 | uwsgi_param REQUEST_METHOD $request_method; 4 | uwsgi_param CONTENT_TYPE $content_type; 5 | uwsgi_param CONTENT_LENGTH $content_length; 6 | 7 | uwsgi_param REQUEST_URI $request_uri; 8 | uwsgi_param PATH_INFO $document_uri; 9 | uwsgi_param DOCUMENT_ROOT $document_root; 10 | uwsgi_param SERVER_PROTOCOL $server_protocol; 11 | uwsgi_param REQUEST_SCHEME $scheme; 12 | uwsgi_param HTTPS $https if_not_empty; 13 | 14 | uwsgi_param REMOTE_ADDR $remote_addr; 15 | uwsgi_param REMOTE_PORT $remote_port; 16 | uwsgi_param SERVER_PORT $server_port; 17 | uwsgi_param SERVER_NAME $server_name; 18 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/nginx-conf/uwsgi_params: -------------------------------------------------------------------------------- 1 | 2 | uwsgi_param QUERY_STRING $query_string; 3 | uwsgi_param REQUEST_METHOD $request_method; 4 | uwsgi_param CONTENT_TYPE $content_type; 5 | uwsgi_param CONTENT_LENGTH $content_length; 6 | 7 | uwsgi_param REQUEST_URI $request_uri; 8 | uwsgi_param PATH_INFO $document_uri; 9 | uwsgi_param DOCUMENT_ROOT $document_root; 10 | uwsgi_param SERVER_PROTOCOL $server_protocol; 11 | uwsgi_param REQUEST_SCHEME $scheme; 12 | uwsgi_param HTTPS $https if_not_empty; 13 | 14 | uwsgi_param REMOTE_ADDR $remote_addr; 15 | uwsgi_param REMOTE_PORT $remote_port; 16 | uwsgi_param SERVER_PORT $server_port; 17 | uwsgi_param SERVER_NAME $server_name; 18 | -------------------------------------------------------------------------------- /5. 开发服务/demo/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | const { 2 | CleanWebpackPlugin 3 | } = require('clean-webpack-plugin') 4 | const config = require('./config') 5 | const { 6 | resolve 7 | } = require('./utils') 8 | 9 | const webpackConfig = { 10 | mode: 'production', 11 | devtool: config.production.sourceMap ? 12 | 'cheap-module-eval-source-map' : 'none', 13 | output: { 14 | filename: '[name].[contentHash:5].js', 15 | chunkFilename: '[name].[contentHash:5].chunk.js' 16 | }, 17 | plugins: [ 18 | new CleanWebpackPlugin() 19 | ] 20 | } 21 | 22 | if (config.production.bundleAnalyzer) { 23 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') 24 | .BundleAnalyzerPlugin 25 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 26 | } 27 | 28 | module.exports = webpackConfig 29 | -------------------------------------------------------------------------------- /5. 开发服务/demo/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'cheap-module-eval-source-map', 6 | devServer: { 7 | open: true, 8 | compress: true, 9 | port: 9002, 10 | hot: true, 11 | hotOnly: false, // HMR 构建失败时刷新页面 12 | historyApiFallback: true, // 任意的 404 响应都被替代为 index.html 13 | clientLogLevel: 'none', 14 | stats: 'minimal', 15 | inline: true, 16 | proxy: { 17 | '/api': { 18 | target: 'http://10.20.23.209:8089/', 19 | pathRewrite: { 20 | '/api': '' 21 | } 22 | } 23 | } 24 | }, 25 | optimization: { 26 | usedExports: true, 27 | runtimeChunk: { 28 | name: 'runtime' 29 | } 30 | }, 31 | plugins: [new webpack.HotModuleReplacementPlugin()] 32 | } 33 | -------------------------------------------------------------------------------- /6. 优化/demo/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'cheap-module-eval-source-map', 6 | devServer: { 7 | open: true, 8 | compress: true, 9 | port: 9002, 10 | hot: true, 11 | hotOnly: false, // HMR 构建失败时刷新页面 12 | historyApiFallback: true, // 任意的 404 响应都被替代为 index.html 13 | clientLogLevel: 'none', 14 | stats: 'minimal', 15 | inline: true, 16 | proxy: { 17 | '/api': { 18 | target: 'http://10.20.23.209:8089/', 19 | pathRewrite: { 20 | '/api': '' 21 | } 22 | } 23 | } 24 | }, 25 | optimization: { 26 | usedExports: true, 27 | runtimeChunk: { 28 | name: 'runtime' 29 | } 30 | }, 31 | plugins: [new webpack.HotModuleReplacementPlugin()] 32 | } 33 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | devtool: 'cheap-module-eval-source-map', 6 | devServer: { 7 | open: true, 8 | compress: true, 9 | port: 9002, 10 | hot: true, 11 | hotOnly: false, // HMR 构建失败时刷新页面 12 | historyApiFallback: true, // 任意的 404 响应都被替代为 index.html 13 | clientLogLevel: 'none', 14 | stats: 'minimal', 15 | inline: true, 16 | proxy: { 17 | '/api': { 18 | target: 'http://10.20.23.209:8089/', 19 | pathRewrite: { 20 | '/api': '' 21 | } 22 | } 23 | } 24 | }, 25 | optimization: { 26 | usedExports: true, 27 | runtimeChunk: { 28 | name: 'runtime' 29 | } 30 | }, 31 | plugins: [new webpack.HotModuleReplacementPlugin()] 32 | } 33 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src.js", 6 | "dependencies": { 7 | "vue": "^2.6.10", 8 | "vue-router": "^3.0.6", 9 | "vuex": "^3.1.1" 10 | }, 11 | "devDependencies": { 12 | "autoprefixer": "^9.6.0", 13 | "css-loader": "^3.0.0", 14 | "file-loader": "^4.0.0", 15 | "html-webpack-plugin": "^3.2.0", 16 | "mini-css-extract-plugin": "^0.7.0", 17 | "postcss-loader": "^3.0.0", 18 | "style-loader": "^0.23.1", 19 | "stylus": "^0.54.5", 20 | "stylus-loader": "^3.0.2", 21 | "url-loader": "^2.0.1", 22 | "vue-loader": "^15.7.0", 23 | "vue-template-compiler": "^2.6.10", 24 | "webpack": "^4.32.2" 25 | }, 26 | "scripts": { 27 | "test": "echo \"Error: no test specified\" && exit 1" 28 | }, 29 | "author": "", 30 | "license": "ISC" 31 | } 32 | -------------------------------------------------------------------------------- /8. 编写自己的 Loader 和 Plugin/demo/helloPlugin/copyright.js: -------------------------------------------------------------------------------- 1 | const { ConcatSource } = require('webpack-sources') 2 | 3 | module.exports = class copyrightWebpackPlugin { 4 | constructor(options) { 5 | // 一般还应做参数合法性校验 6 | let defualt = ` * @copyright ${require('../package.json').auther}\n * @version ${require('../package.json').version}` 7 | this.banner = options.banner || defualt 8 | } 9 | 10 | apply(compiler) { 11 | compiler.hooks.compilation.tap('copyrightWebpackPlugin', compilation => { 12 | compilation.hooks.optimizeChunkAssets.tapAsync('copyrightWebpackPlugin', (chunks, callback) => { 13 | chunks.forEach(chunk => { 14 | chunk.files.forEach(file => { 15 | console.log(this.banner) 16 | compilation.assets[file] = new ConcatSource( 17 | `/*\n${this.banner}\n */`, 18 | '\n\n', 19 | compilation.assets[file] 20 | ) 21 | }) 22 | }) 23 | 24 | callback() 25 | }) 26 | }) 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /6. 优化/demo/src/views/page-a/main.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 33 | 34 | 41 | -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/src/main.js: -------------------------------------------------------------------------------- 1 | // CSS 2 | import './styles/main.css' 3 | // CSS 预处理器 4 | import './styles/main.styl' 5 | // 字体 6 | import './styles/font.css' 7 | 8 | let $body = document.querySelector('body') 9 | 10 | // 图片 11 | let $imgWrapper = document.createElement('div') 12 | 13 | // 大图 14 | // let img = new Image() 15 | // img.src = require('./imgs/多啦A梦.jpg') 16 | // $imgWrapper.append(img) 17 | 18 | // 小图 19 | let smallImgNames = ['赞', '箭头', '添加', '搜索', '分享'] 20 | smallImgNames.forEach(name => { 21 | let img = new Image() 22 | img.src = require(`./imgs/${name}.png`) 23 | $imgWrapper.append(img) 24 | }) 25 | 26 | $body.append($imgWrapper) 27 | 28 | // 字体 29 | $body.append(document.createElement('br')) 30 | let $fontTitle = document.createElement('h1') 31 | $fontTitle.innerHTML = '字体' 32 | $body.append($fontTitle) 33 | 34 | let $fontWrapper = document.createElement('div') 35 | 36 | let $font = document.createElement('i') 37 | $font.className = 'iconfont' 38 | $font.innerHTML = '' 39 | 40 | $fontWrapper.append($font) 41 | $body.append($fontWrapper) 42 | -------------------------------------------------------------------------------- /6. 优化/demo/build/build.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const chalk = require('chalk') 3 | const Spinner = require('cli-spinner').Spinner 4 | const { 5 | generateWebpackConfig, 6 | webpackStatsPrint 7 | } = require('./utils') 8 | 9 | const production = process.argv[2] === 'production' 10 | const config = generateWebpackConfig(production) 11 | 12 | if (production) { 13 | let spinner = new Spinner('building: ') 14 | spinner.start() 15 | 16 | webpack(config, (err, stats) => { 17 | if (err || stats.hasErrors()) { 18 | webpackStatsPrint(stats) 19 | 20 | console.log(chalk.red('× Build failed with errors.\n')) 21 | process.exit() 22 | } 23 | 24 | webpackStatsPrint(stats) 25 | 26 | spinner.stop() 27 | 28 | console.log('\n') 29 | console.log(chalk.cyan('√ Build complete.\n')) 30 | console.log( 31 | chalk.yellow( 32 | ' Built files are meant to be served over an HTTP server.\n' + 33 | ' Opening index.html over file:// won\'t work.\n' 34 | ) 35 | ) 36 | }) 37 | } else { 38 | module.exports = config 39 | } -------------------------------------------------------------------------------- /5. 开发服务/demo/nginx-conf/fastcgi_params: -------------------------------------------------------------------------------- 1 | 2 | fastcgi_param QUERY_STRING $query_string; 3 | fastcgi_param REQUEST_METHOD $request_method; 4 | fastcgi_param CONTENT_TYPE $content_type; 5 | fastcgi_param CONTENT_LENGTH $content_length; 6 | 7 | fastcgi_param SCRIPT_NAME $fastcgi_script_name; 8 | fastcgi_param REQUEST_URI $request_uri; 9 | fastcgi_param DOCUMENT_URI $document_uri; 10 | fastcgi_param DOCUMENT_ROOT $document_root; 11 | fastcgi_param SERVER_PROTOCOL $server_protocol; 12 | fastcgi_param REQUEST_SCHEME $scheme; 13 | fastcgi_param HTTPS $https if_not_empty; 14 | 15 | fastcgi_param GATEWAY_INTERFACE CGI/1.1; 16 | fastcgi_param SERVER_SOFTWARE nginx/$nginx_version; 17 | 18 | fastcgi_param REMOTE_ADDR $remote_addr; 19 | fastcgi_param REMOTE_PORT $remote_port; 20 | fastcgi_param SERVER_ADDR $server_addr; 21 | fastcgi_param SERVER_PORT $server_port; 22 | fastcgi_param SERVER_NAME $server_name; 23 | 24 | # PHP only, required if PHP was built with --enable-force-cgi-redirect 25 | fastcgi_param REDIRECT_STATUS 200; 26 | -------------------------------------------------------------------------------- /6. 优化/demo/nginx-conf/fastcgi_params: -------------------------------------------------------------------------------- 1 | 2 | fastcgi_param QUERY_STRING $query_string; 3 | fastcgi_param REQUEST_METHOD $request_method; 4 | fastcgi_param CONTENT_TYPE $content_type; 5 | fastcgi_param CONTENT_LENGTH $content_length; 6 | 7 | fastcgi_param SCRIPT_NAME $fastcgi_script_name; 8 | fastcgi_param REQUEST_URI $request_uri; 9 | fastcgi_param DOCUMENT_URI $document_uri; 10 | fastcgi_param DOCUMENT_ROOT $document_root; 11 | fastcgi_param SERVER_PROTOCOL $server_protocol; 12 | fastcgi_param REQUEST_SCHEME $scheme; 13 | fastcgi_param HTTPS $https if_not_empty; 14 | 15 | fastcgi_param GATEWAY_INTERFACE CGI/1.1; 16 | fastcgi_param SERVER_SOFTWARE nginx/$nginx_version; 17 | 18 | fastcgi_param REMOTE_ADDR $remote_addr; 19 | fastcgi_param REMOTE_PORT $remote_port; 20 | fastcgi_param SERVER_ADDR $server_addr; 21 | fastcgi_param SERVER_PORT $server_port; 22 | fastcgi_param SERVER_NAME $server_name; 23 | 24 | # PHP only, required if PHP was built with --enable-force-cgi-redirect 25 | fastcgi_param REDIRECT_STATUS 200; 26 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/nginx-conf/fastcgi_params: -------------------------------------------------------------------------------- 1 | 2 | fastcgi_param QUERY_STRING $query_string; 3 | fastcgi_param REQUEST_METHOD $request_method; 4 | fastcgi_param CONTENT_TYPE $content_type; 5 | fastcgi_param CONTENT_LENGTH $content_length; 6 | 7 | fastcgi_param SCRIPT_NAME $fastcgi_script_name; 8 | fastcgi_param REQUEST_URI $request_uri; 9 | fastcgi_param DOCUMENT_URI $document_uri; 10 | fastcgi_param DOCUMENT_ROOT $document_root; 11 | fastcgi_param SERVER_PROTOCOL $server_protocol; 12 | fastcgi_param REQUEST_SCHEME $scheme; 13 | fastcgi_param HTTPS $https if_not_empty; 14 | 15 | fastcgi_param GATEWAY_INTERFACE CGI/1.1; 16 | fastcgi_param SERVER_SOFTWARE nginx/$nginx_version; 17 | 18 | fastcgi_param REMOTE_ADDR $remote_addr; 19 | fastcgi_param REMOTE_PORT $remote_port; 20 | fastcgi_param SERVER_ADDR $server_addr; 21 | fastcgi_param SERVER_PORT $server_port; 22 | fastcgi_param SERVER_NAME $server_name; 23 | 24 | # PHP only, required if PHP was built with --enable-force-cgi-redirect 25 | fastcgi_param REDIRECT_STATUS 200; 26 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/nginx-conf/fastcgi_params: -------------------------------------------------------------------------------- 1 | 2 | fastcgi_param QUERY_STRING $query_string; 3 | fastcgi_param REQUEST_METHOD $request_method; 4 | fastcgi_param CONTENT_TYPE $content_type; 5 | fastcgi_param CONTENT_LENGTH $content_length; 6 | 7 | fastcgi_param SCRIPT_NAME $fastcgi_script_name; 8 | fastcgi_param REQUEST_URI $request_uri; 9 | fastcgi_param DOCUMENT_URI $document_uri; 10 | fastcgi_param DOCUMENT_ROOT $document_root; 11 | fastcgi_param SERVER_PROTOCOL $server_protocol; 12 | fastcgi_param REQUEST_SCHEME $scheme; 13 | fastcgi_param HTTPS $https if_not_empty; 14 | 15 | fastcgi_param GATEWAY_INTERFACE CGI/1.1; 16 | fastcgi_param SERVER_SOFTWARE nginx/$nginx_version; 17 | 18 | fastcgi_param REMOTE_ADDR $remote_addr; 19 | fastcgi_param REMOTE_PORT $remote_port; 20 | fastcgi_param SERVER_ADDR $server_addr; 21 | fastcgi_param SERVER_PORT $server_port; 22 | fastcgi_param SERVER_NAME $server_name; 23 | 24 | # PHP only, required if PHP was built with --enable-force-cgi-redirect 25 | fastcgi_param REDIRECT_STATUS 200; 26 | -------------------------------------------------------------------------------- /5. 开发服务/demo/build/build.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const chalk = require('chalk') 3 | const Spinner = require('cli-spinner').Spinner 4 | const { 5 | generateWebpackConfig, 6 | webpackStatsPrint 7 | } = require('./utils') 8 | 9 | const production = process.argv[2] === 'production' 10 | const config = generateWebpackConfig(production) 11 | 12 | if (production) { 13 | let spinner = new Spinner('building: ') 14 | spinner.start() 15 | 16 | webpack(config, (err, stats) => { 17 | if (err || stats.hasErrors()) { 18 | webpackStatsPrint(stats) 19 | 20 | console.log(chalk.red('× Build failed with errors.\n')) 21 | process.exit() 22 | } 23 | 24 | webpackStatsPrint(stats) 25 | 26 | spinner.stop() 27 | 28 | console.log('\n') 29 | console.log(chalk.cyan('√ Build complete.\n')) 30 | console.log( 31 | chalk.yellow( 32 | ' Built files are meant to be served over an HTTP server.\n' + 33 | ' Opening index.html over file:// won\'t work.\n' 34 | ) 35 | ) 36 | }) 37 | } else { 38 | module.exports = config 39 | } 40 | -------------------------------------------------------------------------------- /6. 优化/demo/nginx-conf/fastcgi.conf: -------------------------------------------------------------------------------- 1 | 2 | fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; 3 | fastcgi_param QUERY_STRING $query_string; 4 | fastcgi_param REQUEST_METHOD $request_method; 5 | fastcgi_param CONTENT_TYPE $content_type; 6 | fastcgi_param CONTENT_LENGTH $content_length; 7 | 8 | fastcgi_param SCRIPT_NAME $fastcgi_script_name; 9 | fastcgi_param REQUEST_URI $request_uri; 10 | fastcgi_param DOCUMENT_URI $document_uri; 11 | fastcgi_param DOCUMENT_ROOT $document_root; 12 | fastcgi_param SERVER_PROTOCOL $server_protocol; 13 | fastcgi_param REQUEST_SCHEME $scheme; 14 | fastcgi_param HTTPS $https if_not_empty; 15 | 16 | fastcgi_param GATEWAY_INTERFACE CGI/1.1; 17 | fastcgi_param SERVER_SOFTWARE nginx/$nginx_version; 18 | 19 | fastcgi_param REMOTE_ADDR $remote_addr; 20 | fastcgi_param REMOTE_PORT $remote_port; 21 | fastcgi_param SERVER_ADDR $server_addr; 22 | fastcgi_param SERVER_PORT $server_port; 23 | fastcgi_param SERVER_NAME $server_name; 24 | 25 | # PHP only, required if PHP was built with --enable-force-cgi-redirect 26 | fastcgi_param REDIRECT_STATUS 200; 27 | -------------------------------------------------------------------------------- /5. 开发服务/demo/nginx-conf/fastcgi.conf: -------------------------------------------------------------------------------- 1 | 2 | fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; 3 | fastcgi_param QUERY_STRING $query_string; 4 | fastcgi_param REQUEST_METHOD $request_method; 5 | fastcgi_param CONTENT_TYPE $content_type; 6 | fastcgi_param CONTENT_LENGTH $content_length; 7 | 8 | fastcgi_param SCRIPT_NAME $fastcgi_script_name; 9 | fastcgi_param REQUEST_URI $request_uri; 10 | fastcgi_param DOCUMENT_URI $document_uri; 11 | fastcgi_param DOCUMENT_ROOT $document_root; 12 | fastcgi_param SERVER_PROTOCOL $server_protocol; 13 | fastcgi_param REQUEST_SCHEME $scheme; 14 | fastcgi_param HTTPS $https if_not_empty; 15 | 16 | fastcgi_param GATEWAY_INTERFACE CGI/1.1; 17 | fastcgi_param SERVER_SOFTWARE nginx/$nginx_version; 18 | 19 | fastcgi_param REMOTE_ADDR $remote_addr; 20 | fastcgi_param REMOTE_PORT $remote_port; 21 | fastcgi_param SERVER_ADDR $server_addr; 22 | fastcgi_param SERVER_PORT $server_port; 23 | fastcgi_param SERVER_NAME $server_name; 24 | 25 | # PHP only, required if PHP was built with --enable-force-cgi-redirect 26 | fastcgi_param REDIRECT_STATUS 200; 27 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/nginx-conf/fastcgi.conf: -------------------------------------------------------------------------------- 1 | 2 | fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; 3 | fastcgi_param QUERY_STRING $query_string; 4 | fastcgi_param REQUEST_METHOD $request_method; 5 | fastcgi_param CONTENT_TYPE $content_type; 6 | fastcgi_param CONTENT_LENGTH $content_length; 7 | 8 | fastcgi_param SCRIPT_NAME $fastcgi_script_name; 9 | fastcgi_param REQUEST_URI $request_uri; 10 | fastcgi_param DOCUMENT_URI $document_uri; 11 | fastcgi_param DOCUMENT_ROOT $document_root; 12 | fastcgi_param SERVER_PROTOCOL $server_protocol; 13 | fastcgi_param REQUEST_SCHEME $scheme; 14 | fastcgi_param HTTPS $https if_not_empty; 15 | 16 | fastcgi_param GATEWAY_INTERFACE CGI/1.1; 17 | fastcgi_param SERVER_SOFTWARE nginx/$nginx_version; 18 | 19 | fastcgi_param REMOTE_ADDR $remote_addr; 20 | fastcgi_param REMOTE_PORT $remote_port; 21 | fastcgi_param SERVER_ADDR $server_addr; 22 | fastcgi_param SERVER_PORT $server_port; 23 | fastcgi_param SERVER_NAME $server_name; 24 | 25 | # PHP only, required if PHP was built with --enable-force-cgi-redirect 26 | fastcgi_param REDIRECT_STATUS 200; 27 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/nginx-conf/fastcgi.conf: -------------------------------------------------------------------------------- 1 | 2 | fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; 3 | fastcgi_param QUERY_STRING $query_string; 4 | fastcgi_param REQUEST_METHOD $request_method; 5 | fastcgi_param CONTENT_TYPE $content_type; 6 | fastcgi_param CONTENT_LENGTH $content_length; 7 | 8 | fastcgi_param SCRIPT_NAME $fastcgi_script_name; 9 | fastcgi_param REQUEST_URI $request_uri; 10 | fastcgi_param DOCUMENT_URI $document_uri; 11 | fastcgi_param DOCUMENT_ROOT $document_root; 12 | fastcgi_param SERVER_PROTOCOL $server_protocol; 13 | fastcgi_param REQUEST_SCHEME $scheme; 14 | fastcgi_param HTTPS $https if_not_empty; 15 | 16 | fastcgi_param GATEWAY_INTERFACE CGI/1.1; 17 | fastcgi_param SERVER_SOFTWARE nginx/$nginx_version; 18 | 19 | fastcgi_param REMOTE_ADDR $remote_addr; 20 | fastcgi_param REMOTE_PORT $remote_port; 21 | fastcgi_param SERVER_ADDR $server_addr; 22 | fastcgi_param SERVER_PORT $server_port; 23 | fastcgi_param SERVER_NAME $server_name; 24 | 25 | # PHP only, required if PHP was built with --enable-force-cgi-redirect 26 | fastcgi_param REDIRECT_STATUS 200; 27 | -------------------------------------------------------------------------------- /5. 开发服务/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --progress --config build/build.js", 8 | "build": "node build/build.js production", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "dependencies": { 12 | "vue": "^2.6.10", 13 | "vue-router": "^3.0.6", 14 | "vuex": "^3.1.1" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^9.6.0", 18 | "chalk": "^2.4.2", 19 | "clean-webpack-plugin": "^3.0.0", 20 | "cli-spinner": "^0.2.10", 21 | "css-loader": "^3.0.0", 22 | "file-loader": "^4.0.0", 23 | "html-webpack-plugin": "^3.2.0", 24 | "mini-css-extract-plugin": "^0.7.0", 25 | "postcss-loader": "^3.0.0", 26 | "style-loader": "^0.23.1", 27 | "stylus": "^0.54.5", 28 | "stylus-loader": "^3.0.2", 29 | "url-loader": "^2.0.1", 30 | "vue-loader": "^15.7.0", 31 | "vue-template-compiler": "^2.6.10", 32 | "webpack": "^4.32.2", 33 | "webpack-cli": "^3.3.5", 34 | "webpack-dev-server": "^3.7.2", 35 | "webpack-merge": "^4.2.1" 36 | }, 37 | "author": "", 38 | "license": "ISC" 39 | } 40 | -------------------------------------------------------------------------------- /5. 开发服务/demo/build/utils.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const merge = require('webpack-merge') 3 | const path = require('path') 4 | 5 | const _memorize = fn => { 6 | const cache = {} 7 | return (...args) => { 8 | const _args = JSON.stringify(args) 9 | return cache[_args] || (cache[_args] = fn.call(this, ...args)) 10 | } 11 | } 12 | 13 | const _resolve = (...args) => { 14 | return path.join(__dirname, '..', ...args) 15 | } 16 | 17 | const resolve = _memorize(_resolve) 18 | 19 | const generateWebpackConfig = production => { 20 | if (production) { 21 | process.env.NODE_ENV = 'production' 22 | return merge(require('./webpack.base.conf'), require('./webpack.prod.conf')) 23 | } else { 24 | process.env.NODE_ENV = 'development' 25 | return merge(require('./webpack.base.conf'), require('./webpack.dev.conf')) 26 | } 27 | } 28 | 29 | const webpackStatsPrint = function (stats) { 30 | console.log( 31 | stats 32 | .toString({ 33 | colors: true, 34 | modules: false, 35 | // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 36 | children: false, 37 | chunks: false, 38 | chunkModules: false 39 | }) 40 | .replace(/\n.*?static.*?(?=\n)/g, '') + '\n' 41 | ) 42 | } 43 | 44 | module.exports = { 45 | resolve, 46 | generateWebpackConfig, 47 | webpackStatsPrint 48 | } 49 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/utils/module.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description 模块加载相关函数 3 | * @author luwuer 4 | */ 5 | 6 | import { 7 | getRoutes 8 | } from '@/utils/api/base' 9 | 10 | /** 11 | * @description 分离模块名 12 | * @param {String} path 路由路径 13 | */ 14 | const splitModName = path => { 15 | // 本例中路由规定为 /mod/{modName} ,如 /mod/a/xxx 对应模块名为 mod-a 16 | if (/\/mod\/(\w+)/.test(path)) { 17 | return 'mod-' + RegExp.$1 18 | } 19 | return '' 20 | } 21 | 22 | /** 23 | * @description 取得模块有权限的路由 + 模块路由和组件映射关系 = 需要动态添加的路由 24 | * @param {String} modName 模块名 25 | */ 26 | const generateRoutes = (modName, routerMap) => { 27 | return getRoutes(modName).then(data => { 28 | return data.map(route => { 29 | route.component = routerMap[route.name] 30 | route.name = `${modName}-${route.name}` 31 | return route 32 | }) 33 | }) 34 | } 35 | 36 | /** 37 | * @description 获取模块打包后的标准入口 JS 文件 38 | * @param {String} modName 39 | */ 40 | const getModResources = modName => { 41 | if (process.env.NODE_ENV === 'development') { 42 | // 开发环境用 es6 模块加载方式，方便调试 43 | return import(`@/modules/${modName}/index.js`).then(res => { 44 | return res 45 | }) 46 | } else { 47 | return new Promise((resolve, reject) => { 48 | requirejs(['/modules/' + modName + '/' + modName + '.js'], mod => { 49 | resolve(mod) 50 | }) 51 | }) 52 | } 53 | } 54 | 55 | export { 56 | splitModName, 57 | generateRoutes, 58 | getModResources 59 | } 60 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/modules/mod-a/mod-a/function-a/page-a.7ae13.chunk.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @auther 莫得盐 3 | * @version 1.0.0 4 | * @info hash:ee3b08193deda7f6b987, chunkhash:55807f8656cbdabe9a73, name:mod-a/function-a/page-a, filebase:page-a.7ae13.chunk.js, query:, file:mod-a/function-a/page-a.7ae13.chunk.js 5 | */ 6 | (window.webpackJsonp_mod_a=window.webpackJsonp_mod_a||[]).push([[1],[,function(t,e,n){"use strict";function o(t,e,n,o,i,s,r,a){var _,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),o&&(c.functional=!0),s&&(c._scopeId="data-v-"+s),r?(_=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=_):i&&(_=a?function(){i.call(this,this.$root.$options.shadowRoot)}:i),_)if(c.functional){c._injectStyles=_;var u=c.render;c.render=function(t,e){return _.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,_):[_]}return{exports:t,options:c}}n.d(e,"a",function(){return o})},function(t,e,n){"use strict";n.r(e);var o=function(){var t=this.$createElement;this._self._c;return this._m(0)};o._withStripped=!0;var i={},s=n(1),r=Object(s.a)(i,o,[function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("h1",[this._v("module A")]),this._v(" "),e("h3",[this._v("function A")]),this._v(" "),e("h5",[this._v("page A")])])}],!1,null,null,null);r.options.__file="src/modules/mod-a/views/function-a/page-a.vue";e.default=r.exports}]]); -------------------------------------------------------------------------------- /7. 微前端方案/demo/modules/mod-a/mod-a/function-a/page-b.19aef.chunk.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @auther 莫得盐 3 | * @version 1.0.0 4 | * @info hash:ee3b08193deda7f6b987, chunkhash:08ea92cc71f60d925bda, name:mod-a/function-a/page-b, filebase:page-b.19aef.chunk.js, query:, file:mod-a/function-a/page-b.19aef.chunk.js 5 | */ 6 | (window.webpackJsonp_mod_a=window.webpackJsonp_mod_a||[]).push([[2],[,function(t,e,n){"use strict";function o(t,e,n,o,i,s,r,a){var _,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),o&&(c.functional=!0),s&&(c._scopeId="data-v-"+s),r?(_=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=_):i&&(_=a?function(){i.call(this,this.$root.$options.shadowRoot)}:i),_)if(c.functional){c._injectStyles=_;var u=c.render;c.render=function(t,e){return _.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,_):[_]}return{exports:t,options:c}}n.d(e,"a",function(){return o})},,function(t,e,n){"use strict";n.r(e);var o=function(){var t=this.$createElement;this._self._c;return this._m(0)};o._withStripped=!0;var i={},s=n(1),r=Object(s.a)(i,o,[function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("h1",[this._v("module A")]),this._v(" "),e("h3",[this._v("function B")]),this._v(" "),e("h5",[this._v("page B")])])}],!1,null,null,null);r.options.__file="src/modules/mod-a/views/function-a/page-b.vue";e.default=r.exports}]]); -------------------------------------------------------------------------------- /7. 微前端方案/demo/modules/mod-b/mod-b/function-a/page-a.ff890.chunk.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @auther 莫得盐 3 | * @version 1.0.0 4 | * @info hash:4d68637115e396dc2be8, chunkhash:81f70cc651c323d34f05, name:mod-b/function-a/page-a, filebase:page-a.ff890.chunk.js, query:, file:mod-b/function-a/page-a.ff890.chunk.js 5 | */ 6 | (window.webpackJsonp_mod_b=window.webpackJsonp_mod_b||[]).push([[1],[,function(t,e,n){"use strict";function o(t,e,n,o,i,s,r,_){var a,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),o&&(c.functional=!0),s&&(c._scopeId="data-v-"+s),r?(a=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=a):i&&(a=_?function(){i.call(this,this.$root.$options.shadowRoot)}:i),a)if(c.functional){c._injectStyles=a;var u=c.render;c.render=function(t,e){return a.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,a):[a]}return{exports:t,options:c}}n.d(e,"a",function(){return o})},function(t,e,n){"use strict";n.r(e);var o=function(){var t=this.$createElement;this._self._c;return this._m(0)};o._withStripped=!0;var i={},s=n(1),r=Object(s.a)(i,o,[function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("h1",[this._v("module B")]),this._v(" "),e("h3",[this._v("function A")]),this._v(" "),e("h5",[this._v("page A")])])}],!1,null,null,null);r.options.__file="src/modules/mod-b/views/function-a/page-a.vue";e.default=r.exports}]]); -------------------------------------------------------------------------------- /7. 微前端方案/demo/modules/mod-b/mod-b/function-a/page-b.d180c.chunk.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @auther 莫得盐 3 | * @version 1.0.0 4 | * @info hash:4d68637115e396dc2be8, chunkhash:942e2383cdd1ed493031, name:mod-b/function-a/page-b, filebase:page-b.d180c.chunk.js, query:, file:mod-b/function-a/page-b.d180c.chunk.js 5 | */ 6 | (window.webpackJsonp_mod_b=window.webpackJsonp_mod_b||[]).push([[2],[,function(t,e,n){"use strict";function o(t,e,n,o,i,s,r,_){var a,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),o&&(c.functional=!0),s&&(c._scopeId="data-v-"+s),r?(a=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=a):i&&(a=_?function(){i.call(this,this.$root.$options.shadowRoot)}:i),a)if(c.functional){c._injectStyles=a;var u=c.render;c.render=function(t,e){return a.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,a):[a]}return{exports:t,options:c}}n.d(e,"a",function(){return o})},,function(t,e,n){"use strict";n.r(e);var o=function(){var t=this.$createElement;this._self._c;return this._m(0)};o._withStripped=!0;var i={},s=n(1),r=Object(s.a)(i,o,[function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("h1",[this._v("module B")]),this._v(" "),e("h3",[this._v("function B")]),this._v(" "),e("h5",[this._v("page B")])])}],!1,null,null,null);r.options.__file="src/modules/mod-b/views/function-a/page-b.vue";e.default=r.exports}]]); -------------------------------------------------------------------------------- /7. 微前端方案/demo/modules/mod-a/mod-a/function-b/page-a.9501e.chunk.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @auther 莫得盐 3 | * @version 1.0.0 4 | * @info hash:ee3b08193deda7f6b987, chunkhash:b0acb173477b22bb556e, name:mod-a/function-b/page-a, filebase:page-a.9501e.chunk.js, query:, file:mod-a/function-b/page-a.9501e.chunk.js 5 | */ 6 | (window.webpackJsonp_mod_a=window.webpackJsonp_mod_a||[]).push([[3],[,function(t,e,n){"use strict";function o(t,e,n,o,i,s,r,a){var _,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),o&&(c.functional=!0),s&&(c._scopeId="data-v-"+s),r?(_=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=_):i&&(_=a?function(){i.call(this,this.$root.$options.shadowRoot)}:i),_)if(c.functional){c._injectStyles=_;var u=c.render;c.render=function(t,e){return _.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,_):[_]}return{exports:t,options:c}}n.d(e,"a",function(){return o})},,,function(t,e,n){"use strict";n.r(e);var o=function(){var t=this.$createElement;this._self._c;return this._m(0)};o._withStripped=!0;var i={},s=n(1),r=Object(s.a)(i,o,[function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("h1",[this._v("module A")]),this._v(" "),e("h3",[this._v("function B")]),this._v(" "),e("h5",[this._v("page A")])])}],!1,null,null,null);r.options.__file="src/modules/mod-a/views/function-b/page-a.vue";e.default=r.exports}]]); -------------------------------------------------------------------------------- /7. 微前端方案/demo/modules/mod-b/mod-b/function-b/page-a.472b7.chunk.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @auther 莫得盐 3 | * @version 1.0.0 4 | * @info hash:4d68637115e396dc2be8, chunkhash:08c52d053ece0cce379d, name:mod-b/function-b/page-a, filebase:page-a.472b7.chunk.js, query:, file:mod-b/function-b/page-a.472b7.chunk.js 5 | */ 6 | (window.webpackJsonp_mod_b=window.webpackJsonp_mod_b||[]).push([[3],[,function(t,e,n){"use strict";function o(t,e,n,o,i,s,r,_){var a,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),o&&(c.functional=!0),s&&(c._scopeId="data-v-"+s),r?(a=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=a):i&&(a=_?function(){i.call(this,this.$root.$options.shadowRoot)}:i),a)if(c.functional){c._injectStyles=a;var u=c.render;c.render=function(t,e){return a.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,a):[a]}return{exports:t,options:c}}n.d(e,"a",function(){return o})},,,function(t,e,n){"use strict";n.r(e);var o=function(){var t=this.$createElement;this._self._c;return this._m(0)};o._withStripped=!0;var i={},s=n(1),r=Object(s.a)(i,o,[function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("h1",[this._v("module B")]),this._v(" "),e("h3",[this._v("function B")]),this._v(" "),e("h5",[this._v("page A")])])}],!1,null,null,null);r.options.__file="src/modules/mod-b/views/function-b/page-a.vue";e.default=r.exports}]]); -------------------------------------------------------------------------------- /7. 微前端方案/demo/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import store from '@/store' 4 | import { 5 | splitModName, 6 | getModResources, 7 | generateRoutes 8 | } from '../utils/module' 9 | 10 | Vue.use(Router) 11 | 12 | const router = new Router({ 13 | mode: 'history', 14 | routes: [{ 15 | path: '/', 16 | name: 'index', 17 | component: () => 18 | import( /* webpackChunkName: "views/index" */ '@/views/index/main.vue') 19 | }] 20 | }) 21 | 22 | // 记录注册过的模块 23 | let registeredRouterRecord = [] 24 | 25 | /** 26 | * @description 检查模块是否注册 27 | * @param {String} modName 模块名 28 | */ 29 | const isModRegistered = modName => { 30 | return registeredRouterRecord.includes(modName) 31 | } 32 | 33 | /** 34 | * @description 注册模块 35 | * @param {String} modName 模块名 36 | */ 37 | const regeisterMod = modName => { 38 | getModResources(modName).then(res => { 39 | console.log('res:', res) 40 | 41 | // generate routes 42 | generateRoutes(modName, res.router).then(appendRoutes => { 43 | console.log('appendRoutes:', appendRoutes) 44 | // register router 45 | router.addRoutes(appendRoutes) 46 | }) 47 | 48 | // register store 49 | store.registerModule(modName, res.store) 50 | 51 | registeredRouterRecord.push(modName) 52 | }) 53 | } 54 | 55 | router.beforeEach((to, from, next) => { 56 | console.log(to, from) 57 | let modName = splitModName(to.path) 58 | // 非基础模块 + 模块未注册 = 需要注册模块 59 | if (modName && !isModRegistered(modName)) { 60 | regeisterMod(modName) 61 | } 62 | next() 63 | }) 64 | 65 | export default router 66 | -------------------------------------------------------------------------------- /5. 开发服务/demo/nginx-conf/conf/8082-static.conf: -------------------------------------------------------------------------------- 1 | # 静态资源访问服务 2 | server { 3 | listen 8092; 4 | server_name 127.0.0.1; 5 | add_header Cache-Control no-store; 6 | 7 | # 前台 8 | location / { 9 | # root D:/DataCenter/STEPHUI1/HUI/协助李宁叠-文件上传展示/demo/dist; 10 | # root D:/DataCenter/STEPHUI1/work-with-webpack/better-vue-project/dist; 11 | root D:/DataCenter/STEPHUI1/new-hui-new0416/dist; 12 | # root D:/DataCenter/STEPHUI1/HUI/uf_3_分模块打包/uf-sys-web/dist; 13 | # root D:/DataCenter/STEPHUI1/HUI/uf_3_分模块打包/uf-sys-web_2019052301/dist; 14 | # root D:/DataCenter/STEPHUI1/uf-sys-web_2019033001/dist; 15 | # root D:/DataCenter/STEPHUI1/new-hui(1)/dist; 16 | # root D:/DataCenter/STEPHUI1/new-hui/dist; 17 | # root D:/DataCenter/STEPHUI1/new-hui-pro/dist; 18 | try_files $uri $uri/ /index.html; 19 | index index.html; 20 | 21 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|ico|swf|woff)$) { 22 | add_header Pragma public; 23 | add_header Cache-Control public; 24 | expires 30d; 25 | } 26 | 27 | if ($request_filename ~* .*.(js|css)$) { 28 | add_header Pragma public; 29 | add_header Cache-Control public; 30 | expires 12h; 31 | } 32 | } 33 | 34 | # 接口 35 | location /api { 36 | # proxy_pass http://10.20.23.209:8089/; # uf 3 37 | # proxy_pass http://192.168.71.68:8089/; # uf 3 38 | proxy_pass http://192.168.94.98:8080/; 39 | # proxy_pass http://10.20.23.209:8089/; 40 | # proxy_pass http://10.20.23.215:8088/; 41 | # proxy_cookie_path /pi /; # pi 42 | proxy_read_timeout 3600s; 43 | send_timeout 7200; 44 | fastcgi_buffers 8 128k; 45 | } 46 | } -------------------------------------------------------------------------------- /6. 优化/demo/nginx-conf/conf/8082-static.conf: -------------------------------------------------------------------------------- 1 | # 静态资源访问服务 2 | server { 3 | listen 8092; 4 | server_name 127.0.0.1; 5 | add_header Cache-Control no-store; 6 | 7 | # 前台 8 | location / { 9 | # root D:/DataCenter/STEPHUI1/HUI/协助李宁叠-文件上传展示/demo/dist; 10 | # root D:/DataCenter/STEPHUI1/work-with-webpack/better-vue-project/dist; 11 | root D:/DataCenter/STEPHUI1/new-hui-new0416/dist; 12 | # root D:/DataCenter/STEPHUI1/HUI/uf_3_分模块打包/uf-sys-web/dist; 13 | # root D:/DataCenter/STEPHUI1/HUI/uf_3_分模块打包/uf-sys-web_2019052301/dist; 14 | # root D:/DataCenter/STEPHUI1/uf-sys-web_2019033001/dist; 15 | # root D:/DataCenter/STEPHUI1/new-hui(1)/dist; 16 | # root D:/DataCenter/STEPHUI1/new-hui/dist; 17 | # root D:/DataCenter/STEPHUI1/new-hui-pro/dist; 18 | try_files $uri $uri/ /index.html; 19 | index index.html; 20 | 21 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|ico|swf|woff)$) { 22 | add_header Pragma public; 23 | add_header Cache-Control public; 24 | expires 30d; 25 | } 26 | 27 | if ($request_filename ~* .*.(js|css)$) { 28 | add_header Pragma public; 29 | add_header Cache-Control public; 30 | expires 12h; 31 | } 32 | } 33 | 34 | # 接口 35 | location /api { 36 | # proxy_pass http://10.20.23.209:8089/; # uf 3 37 | # proxy_pass http://192.168.71.68:8089/; # uf 3 38 | proxy_pass http://192.168.94.98:8080/; 39 | # proxy_pass http://10.20.23.209:8089/; 40 | # proxy_pass http://10.20.23.215:8088/; 41 | # proxy_cookie_path /pi /; # pi 42 | proxy_read_timeout 3600s; 43 | send_timeout 7200; 44 | fastcgi_buffers 8 128k; 45 | } 46 | } -------------------------------------------------------------------------------- /7. 微前端方案/demo/nginx-conf/conf/8082-static.conf: -------------------------------------------------------------------------------- 1 | # 静态资源访问服务 2 | server { 3 | listen 8092; 4 | server_name 127.0.0.1; 5 | add_header Cache-Control no-store; 6 | 7 | # 前台 8 | location / { 9 | # root D:/DataCenter/STEPHUI1/HUI/协助李宁叠-文件上传展示/demo/dist; 10 | # root D:/DataCenter/STEPHUI1/work-with-webpack/better-vue-project/dist; 11 | root D:/DataCenter/STEPHUI1/new-hui-new0416/dist; 12 | # root D:/DataCenter/STEPHUI1/HUI/uf_3_分模块打包/uf-sys-web/dist; 13 | # root D:/DataCenter/STEPHUI1/HUI/uf_3_分模块打包/uf-sys-web_2019052301/dist; 14 | # root D:/DataCenter/STEPHUI1/uf-sys-web_2019033001/dist; 15 | # root D:/DataCenter/STEPHUI1/new-hui(1)/dist; 16 | # root D:/DataCenter/STEPHUI1/new-hui/dist; 17 | # root D:/DataCenter/STEPHUI1/new-hui-pro/dist; 18 | try_files $uri $uri/ /index.html; 19 | index index.html; 20 | 21 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|ico|swf|woff)$) { 22 | add_header Pragma public; 23 | add_header Cache-Control public; 24 | expires 30d; 25 | } 26 | 27 | if ($request_filename ~* .*.(js|css)$) { 28 | add_header Pragma public; 29 | add_header Cache-Control public; 30 | expires 12h; 31 | } 32 | } 33 | 34 | # 接口 35 | location /api { 36 | # proxy_pass http://10.20.23.209:8089/; # uf 3 37 | # proxy_pass http://192.168.71.68:8089/; # uf 3 38 | proxy_pass http://192.168.94.98:8080/; 39 | # proxy_pass http://10.20.23.209:8089/; 40 | # proxy_pass http://10.20.23.215:8088/; 41 | # proxy_cookie_path /pi /; # pi 42 | proxy_read_timeout 3600s; 43 | send_timeout 7200; 44 | fastcgi_buffers 8 128k; 45 | } 46 | } -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/nginx-conf/conf/8082-static.conf: -------------------------------------------------------------------------------- 1 | # 静态资源访问服务 2 | server { 3 | listen 8092; 4 | server_name 127.0.0.1; 5 | add_header Cache-Control no-store; 6 | 7 | # 前台 8 | location / { 9 | # root D:/DataCenter/STEPHUI1/HUI/协助李宁叠-文件上传展示/demo/dist; 10 | # root D:/DataCenter/STEPHUI1/work-with-webpack/better-vue-project/dist; 11 | root D:/DataCenter/STEPHUI1/new-hui-new0416/dist; 12 | # root D:/DataCenter/STEPHUI1/HUI/uf_3_分模块打包/uf-sys-web/dist; 13 | # root D:/DataCenter/STEPHUI1/HUI/uf_3_分模块打包/uf-sys-web_2019052301/dist; 14 | # root D:/DataCenter/STEPHUI1/uf-sys-web_2019033001/dist; 15 | # root D:/DataCenter/STEPHUI1/new-hui(1)/dist; 16 | # root D:/DataCenter/STEPHUI1/new-hui/dist; 17 | # root D:/DataCenter/STEPHUI1/new-hui-pro/dist; 18 | try_files $uri $uri/ /index.html; 19 | index index.html; 20 | 21 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|ico|swf|woff)$) { 22 | add_header Pragma public; 23 | add_header Cache-Control public; 24 | expires 30d; 25 | } 26 | 27 | if ($request_filename ~* .*.(js|css)$) { 28 | add_header Pragma public; 29 | add_header Cache-Control public; 30 | expires 12h; 31 | } 32 | } 33 | 34 | # 接口 35 | location /api { 36 | # proxy_pass http://10.20.23.209:8089/; # uf 3 37 | # proxy_pass http://192.168.71.68:8089/; # uf 3 38 | proxy_pass http://192.168.94.98:8080/; 39 | # proxy_pass http://10.20.23.209:8089/; 40 | # proxy_pass http://10.20.23.215:8088/; 41 | # proxy_cookie_path /pi /; # pi 42 | proxy_read_timeout 3600s; 43 | send_timeout 7200; 44 | fastcgi_buffers 8 128k; 45 | } 46 | } -------------------------------------------------------------------------------- /5. 开发服务/demo/nginx-conf/conf/8081-staticTest.conf: -------------------------------------------------------------------------------- 1 | # 静态资源访问服务 test 2 | server { 3 | listen 8081; 4 | server_name 127.0.0.1; 5 | 6 | charset utf-8; 7 | 8 | # root D:/programfiles/nodejs/app/luwuer.com/dist; 9 | 10 | location = / { 11 | # root D:/programfiles/nodejs/app/luwuer.com/dist; 12 | root D:/dist; 13 | try_files $uri $uri/ /index.html; 14 | index index.html; 15 | } 16 | 17 | # location ~ ^/(.+)/ { 18 | # root D:/programfiles/nodejs/app/luwuer.com/dist/; 19 | # # alias D:/programfiles/nodejs/app/luwuer.com/dist; 20 | # # proxy_pass http://127.0.0.1 21 | # # rewrite $uri /$1 break; 22 | # # rewrite /p1/(.*)$ /$1 break; 23 | # try_files $uri $uri/ /$1.html; 24 | # # index /$1.html /index.html; 25 | # } 26 | 27 | location /p1 { 28 | root D:/programfiles/nodejs/app/luwuer.com/dist; 29 | rewrite /p1/(.*)$ /$1 break; 30 | try_files $uri $uri/ /main.html; 31 | index main.html; 32 | } 33 | 34 | location /p2 { 35 | root D:/programfiles/nodejs/app/luwuer.com/dist; 36 | try_files $uri $uri/ /pixel-palette.html; 37 | index pixel-palette.html; 38 | } 39 | 40 | location /p3 { 41 | root D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist; 42 | # alias D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist/; 43 | # rewrite /p3/(.*)$ /123/$1 break; 44 | try_files $uri $uri/ /main.html; 45 | index main.html; 46 | } 47 | 48 | # location / { 49 | # root D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist; 50 | # # rewrite /p3/(.*)$ /123/$1 break; 51 | # # alias D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist/$1; 52 | # try_files $uri $uri/ /main.html; 53 | # index main.html; 54 | # } 55 | 56 | } -------------------------------------------------------------------------------- /6. 优化/demo/nginx-conf/conf/8081-staticTest.conf: -------------------------------------------------------------------------------- 1 | # 静态资源访问服务 test 2 | server { 3 | listen 8081; 4 | server_name 127.0.0.1; 5 | 6 | charset utf-8; 7 | 8 | # root D:/programfiles/nodejs/app/luwuer.com/dist; 9 | 10 | location = / { 11 | # root D:/programfiles/nodejs/app/luwuer.com/dist; 12 | root D:/dist; 13 | try_files $uri $uri/ /index.html; 14 | index index.html; 15 | } 16 | 17 | # location ~ ^/(.+)/ { 18 | # root D:/programfiles/nodejs/app/luwuer.com/dist/; 19 | # # alias D:/programfiles/nodejs/app/luwuer.com/dist; 20 | # # proxy_pass http://127.0.0.1 21 | # # rewrite $uri /$1 break; 22 | # # rewrite /p1/(.*)$ /$1 break; 23 | # try_files $uri $uri/ /$1.html; 24 | # # index /$1.html /index.html; 25 | # } 26 | 27 | location /p1 { 28 | root D:/programfiles/nodejs/app/luwuer.com/dist; 29 | rewrite /p1/(.*)$ /$1 break; 30 | try_files $uri $uri/ /main.html; 31 | index main.html; 32 | } 33 | 34 | location /p2 { 35 | root D:/programfiles/nodejs/app/luwuer.com/dist; 36 | try_files $uri $uri/ /pixel-palette.html; 37 | index pixel-palette.html; 38 | } 39 | 40 | location /p3 { 41 | root D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist; 42 | # alias D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist/; 43 | # rewrite /p3/(.*)$ /123/$1 break; 44 | try_files $uri $uri/ /main.html; 45 | index main.html; 46 | } 47 | 48 | # location / { 49 | # root D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist; 50 | # # rewrite /p3/(.*)$ /123/$1 break; 51 | # # alias D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist/$1; 52 | # try_files $uri $uri/ /main.html; 53 | # index main.html; 54 | # } 55 | 56 | } -------------------------------------------------------------------------------- /7. 微前端方案/demo/nginx-conf/conf/8081-staticTest.conf: -------------------------------------------------------------------------------- 1 | # 静态资源访问服务 test 2 | server { 3 | listen 8081; 4 | server_name 127.0.0.1; 5 | 6 | charset utf-8; 7 | 8 | # root D:/programfiles/nodejs/app/luwuer.com/dist; 9 | 10 | location = / { 11 | # root D:/programfiles/nodejs/app/luwuer.com/dist; 12 | root D:/dist; 13 | try_files $uri $uri/ /index.html; 14 | index index.html; 15 | } 16 | 17 | # location ~ ^/(.+)/ { 18 | # root D:/programfiles/nodejs/app/luwuer.com/dist/; 19 | # # alias D:/programfiles/nodejs/app/luwuer.com/dist; 20 | # # proxy_pass http://127.0.0.1 21 | # # rewrite $uri /$1 break; 22 | # # rewrite /p1/(.*)$ /$1 break; 23 | # try_files $uri $uri/ /$1.html; 24 | # # index /$1.html /index.html; 25 | # } 26 | 27 | location /p1 { 28 | root D:/programfiles/nodejs/app/luwuer.com/dist; 29 | rewrite /p1/(.*)$ /$1 break; 30 | try_files $uri $uri/ /main.html; 31 | index main.html; 32 | } 33 | 34 | location /p2 { 35 | root D:/programfiles/nodejs/app/luwuer.com/dist; 36 | try_files $uri $uri/ /pixel-palette.html; 37 | index pixel-palette.html; 38 | } 39 | 40 | location /p3 { 41 | root D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist; 42 | # alias D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist/; 43 | # rewrite /p3/(.*)$ /123/$1 break; 44 | try_files $uri $uri/ /main.html; 45 | index main.html; 46 | } 47 | 48 | # location / { 49 | # root D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist; 50 | # # rewrite /p3/(.*)$ /123/$1 break; 51 | # # alias D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist/$1; 52 | # try_files $uri $uri/ /main.html; 53 | # index main.html; 54 | # } 55 | 56 | } -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/nginx-conf/conf/8081-staticTest.conf: -------------------------------------------------------------------------------- 1 | # 静态资源访问服务 test 2 | server { 3 | listen 8081; 4 | server_name 127.0.0.1; 5 | 6 | charset utf-8; 7 | 8 | # root D:/programfiles/nodejs/app/luwuer.com/dist; 9 | 10 | location = / { 11 | # root D:/programfiles/nodejs/app/luwuer.com/dist; 12 | root D:/dist; 13 | try_files $uri $uri/ /index.html; 14 | index index.html; 15 | } 16 | 17 | # location ~ ^/(.+)/ { 18 | # root D:/programfiles/nodejs/app/luwuer.com/dist/; 19 | # # alias D:/programfiles/nodejs/app/luwuer.com/dist; 20 | # # proxy_pass http://127.0.0.1 21 | # # rewrite $uri /$1 break; 22 | # # rewrite /p1/(.*)$ /$1 break; 23 | # try_files $uri $uri/ /$1.html; 24 | # # index /$1.html /index.html; 25 | # } 26 | 27 | location /p1 { 28 | root D:/programfiles/nodejs/app/luwuer.com/dist; 29 | rewrite /p1/(.*)$ /$1 break; 30 | try_files $uri $uri/ /main.html; 31 | index main.html; 32 | } 33 | 34 | location /p2 { 35 | root D:/programfiles/nodejs/app/luwuer.com/dist; 36 | try_files $uri $uri/ /pixel-palette.html; 37 | index pixel-palette.html; 38 | } 39 | 40 | location /p3 { 41 | root D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist; 42 | # alias D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist/; 43 | # rewrite /p3/(.*)$ /123/$1 break; 44 | try_files $uri $uri/ /main.html; 45 | index main.html; 46 | } 47 | 48 | # location / { 49 | # root D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist; 50 | # # rewrite /p3/(.*)$ /123/$1 break; 51 | # # alias D:/本机软件/TortoiseSVN/repository/私享汇/pi-view/dist/$1; 52 | # try_files $uri $uri/ /main.html; 53 | # index main.html; 54 | # } 55 | 56 | } -------------------------------------------------------------------------------- /6. 优化/demo/nginx-conf/conf/8010-iop.conf: -------------------------------------------------------------------------------- 1 | # IOP代理 2 | server { 3 | listen 8010; 4 | server_name 127.0.0.1 localhost 10.26.201.175; 5 | add_header Cache-Control no-store; 6 | 7 | # dev-server 8 | location / { 9 | proxy_pass http://127.0.0.1:8009/; 10 | } 11 | 12 | location ~ /\. { 13 | deny all; 14 | } 15 | 16 | location ^~ /apache-tomcat-9.0.10/ { 17 | deny all; 18 | } 19 | 20 | # api 21 | location /api { 22 | proxy_pass http://10.253.173.207:8090/iop/; # 联测 23 | proxy_cookie_path /iop /; 24 | proxy_read_timeout 3600s; 25 | send_timeout 7200; 26 | fastcgi_buffers 8 128k; 27 | proxy_set_header X-Real-IP $remote_addr; 28 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 29 | proxy_set_header Host $http_host; 30 | proxy_set_header X-Forwarded-Proto https; 31 | proxy_set_header X-NginX-Proxy true; 32 | proxy_http_version 1.1; 33 | proxy_set_header Upgrade $http_upgrade; 34 | proxy_set_header Connection "Upgrade"; 35 | proxy_hide_header 'Pragma'; 36 | proxy_redirect off; 37 | add_header Cache-Control no-store; 38 | break; 39 | } 40 | 41 | # file 42 | location /file/ { 43 | proxy_pass http://10.253.173.207:8090/iop/file/; # 联测 44 | } 45 | 46 | # websocket 47 | location /websocket/ { 48 | proxy_pass http://10.253.173.207:8090/iop/websocket/; # 联测 49 | proxy_http_version 1.1; 50 | proxy_set_header Upgrade $http_upgrade; 51 | proxy_set_header Connection "upgrade"; 52 | proxy_set_header X-Real-IP $remote_addr; 53 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 54 | proxy_set_header Host $http_host; 55 | proxy_set_header X-NginX-Proxy true; 56 | proxy_connect_timeout 300; 57 | proxy_read_timeout 300; 58 | proxy_send_timeout 300; 59 | } 60 | 61 | # 视频流 62 | #location /hls/ { 63 | #proxy_pass http://122.224.126.29:8080/; 64 | #} 65 | 66 | } -------------------------------------------------------------------------------- /5. 开发服务/demo/nginx-conf/conf/8010-iop.conf: -------------------------------------------------------------------------------- 1 | # IOP代理 2 | server { 3 | listen 8010; 4 | server_name 127.0.0.1 localhost 10.26.201.175; 5 | add_header Cache-Control no-store; 6 | 7 | # dev-server 8 | location / { 9 | proxy_pass http://127.0.0.1:8009/; 10 | } 11 | 12 | location ~ /\. { 13 | deny all; 14 | } 15 | 16 | location ^~ /apache-tomcat-9.0.10/ { 17 | deny all; 18 | } 19 | 20 | # api 21 | location /api { 22 | proxy_pass http://10.253.173.207:8090/iop/; # 联测 23 | proxy_cookie_path /iop /; 24 | proxy_read_timeout 3600s; 25 | send_timeout 7200; 26 | fastcgi_buffers 8 128k; 27 | proxy_set_header X-Real-IP $remote_addr; 28 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 29 | proxy_set_header Host $http_host; 30 | proxy_set_header X-Forwarded-Proto https; 31 | proxy_set_header X-NginX-Proxy true; 32 | proxy_http_version 1.1; 33 | proxy_set_header Upgrade $http_upgrade; 34 | proxy_set_header Connection "Upgrade"; 35 | proxy_hide_header 'Pragma'; 36 | proxy_redirect off; 37 | add_header Cache-Control no-store; 38 | break; 39 | } 40 | 41 | # file 42 | location /file/ { 43 | proxy_pass http://10.253.173.207:8090/iop/file/; # 联测 44 | } 45 | 46 | # websocket 47 | location /websocket/ { 48 | proxy_pass http://10.253.173.207:8090/iop/websocket/; # 联测 49 | proxy_http_version 1.1; 50 | proxy_set_header Upgrade $http_upgrade; 51 | proxy_set_header Connection "upgrade"; 52 | proxy_set_header X-Real-IP $remote_addr; 53 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 54 | proxy_set_header Host $http_host; 55 | proxy_set_header X-NginX-Proxy true; 56 | proxy_connect_timeout 300; 57 | proxy_read_timeout 300; 58 | proxy_send_timeout 300; 59 | } 60 | 61 | # 视频流 62 | #location /hls/ { 63 | #proxy_pass http://122.224.126.29:8080/; 64 | #} 65 | 66 | } -------------------------------------------------------------------------------- /7. 微前端方案/demo/nginx-conf/conf/8010-iop.conf: -------------------------------------------------------------------------------- 1 | # IOP代理 2 | server { 3 | listen 8010; 4 | server_name 127.0.0.1 localhost 10.26.201.175; 5 | add_header Cache-Control no-store; 6 | 7 | # dev-server 8 | location / { 9 | proxy_pass http://127.0.0.1:8009/; 10 | } 11 | 12 | location ~ /\. { 13 | deny all; 14 | } 15 | 16 | location ^~ /apache-tomcat-9.0.10/ { 17 | deny all; 18 | } 19 | 20 | # api 21 | location /api { 22 | proxy_pass http://10.253.173.207:8090/iop/; # 联测 23 | proxy_cookie_path /iop /; 24 | proxy_read_timeout 3600s; 25 | send_timeout 7200; 26 | fastcgi_buffers 8 128k; 27 | proxy_set_header X-Real-IP $remote_addr; 28 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 29 | proxy_set_header Host $http_host; 30 | proxy_set_header X-Forwarded-Proto https; 31 | proxy_set_header X-NginX-Proxy true; 32 | proxy_http_version 1.1; 33 | proxy_set_header Upgrade $http_upgrade; 34 | proxy_set_header Connection "Upgrade"; 35 | proxy_hide_header 'Pragma'; 36 | proxy_redirect off; 37 | add_header Cache-Control no-store; 38 | break; 39 | } 40 | 41 | # file 42 | location /file/ { 43 | proxy_pass http://10.253.173.207:8090/iop/file/; # 联测 44 | } 45 | 46 | # websocket 47 | location /websocket/ { 48 | proxy_pass http://10.253.173.207:8090/iop/websocket/; # 联测 49 | proxy_http_version 1.1; 50 | proxy_set_header Upgrade $http_upgrade; 51 | proxy_set_header Connection "upgrade"; 52 | proxy_set_header X-Real-IP $remote_addr; 53 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 54 | proxy_set_header Host $http_host; 55 | proxy_set_header X-NginX-Proxy true; 56 | proxy_connect_timeout 300; 57 | proxy_read_timeout 300; 58 | proxy_send_timeout 300; 59 | } 60 | 61 | # 视频流 62 | #location /hls/ { 63 | #proxy_pass http://122.224.126.29:8080/; 64 | #} 65 | 66 | } -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/nginx-conf/conf/8010-iop.conf: -------------------------------------------------------------------------------- 1 | # IOP代理 2 | server { 3 | listen 8010; 4 | server_name 127.0.0.1 localhost 10.26.201.175; 5 | add_header Cache-Control no-store; 6 | 7 | # dev-server 8 | location / { 9 | proxy_pass http://127.0.0.1:8009/; 10 | } 11 | 12 | location ~ /\. { 13 | deny all; 14 | } 15 | 16 | location ^~ /apache-tomcat-9.0.10/ { 17 | deny all; 18 | } 19 | 20 | # api 21 | location /api { 22 | proxy_pass http://10.253.173.207:8090/iop/; # 联测 23 | proxy_cookie_path /iop /; 24 | proxy_read_timeout 3600s; 25 | send_timeout 7200; 26 | fastcgi_buffers 8 128k; 27 | proxy_set_header X-Real-IP $remote_addr; 28 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 29 | proxy_set_header Host $http_host; 30 | proxy_set_header X-Forwarded-Proto https; 31 | proxy_set_header X-NginX-Proxy true; 32 | proxy_http_version 1.1; 33 | proxy_set_header Upgrade $http_upgrade; 34 | proxy_set_header Connection "Upgrade"; 35 | proxy_hide_header 'Pragma'; 36 | proxy_redirect off; 37 | add_header Cache-Control no-store; 38 | break; 39 | } 40 | 41 | # file 42 | location /file/ { 43 | proxy_pass http://10.253.173.207:8090/iop/file/; # 联测 44 | } 45 | 46 | # websocket 47 | location /websocket/ { 48 | proxy_pass http://10.253.173.207:8090/iop/websocket/; # 联测 49 | proxy_http_version 1.1; 50 | proxy_set_header Upgrade $http_upgrade; 51 | proxy_set_header Connection "upgrade"; 52 | proxy_set_header X-Real-IP $remote_addr; 53 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 54 | proxy_set_header Host $http_host; 55 | proxy_set_header X-NginX-Proxy true; 56 | proxy_connect_timeout 300; 57 | proxy_read_timeout 300; 58 | proxy_send_timeout 300; 59 | } 60 | 61 | # 视频流 62 | #location /hls/ { 63 | #proxy_pass http://122.224.126.29:8080/; 64 | #} 65 | 66 | } -------------------------------------------------------------------------------- /6. 优化/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src.js", 6 | "sideEffects": [ 7 | "*.vue" 8 | ], 9 | "scripts": { 10 | "dev": "webpack-dev-server --progress --config build/build.js", 11 | "build": "node build/build.js production", 12 | "dll": "webpack --config build/webpack.dll.conf.js", 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "dependencies": { 16 | "loadsh": "^0.0.4", 17 | "vue": "^2.6.10", 18 | "vue-router": "^3.0.6", 19 | "vuex": "^3.1.1" 20 | }, 21 | "devDependencies": { 22 | "@babel/core": "^7.5.0", 23 | "@babel/plugin-syntax-dynamic-import": "^7.2.0", 24 | "@babel/preset-env": "^7.5.0", 25 | "add-asset-html-webpack-plugin": "^3.1.3", 26 | "autoprefixer": "^9.6.0", 27 | "babel-loader": "^8.0.6", 28 | "cache-loader": "^4.0.1", 29 | "chalk": "^2.4.2", 30 | "clean-webpack-plugin": "^3.0.0", 31 | "cli-spinner": "^0.2.10", 32 | "copy-webpack-plugin": "^5.0.3", 33 | "css-loader": "^3.0.0", 34 | "eslint": "^6.0.1", 35 | "eslint-config-standard": "^13.0.0", 36 | "eslint-plugin-vue": "^5.2.3", 37 | "file-loader": "^4.0.0", 38 | "glob": "^7.1.4", 39 | "html-webpack-plugin": "^3.2.0", 40 | "mini-css-extract-plugin": "^0.7.0", 41 | "optimize-css-assets-webpack-plugin": "^5.0.3", 42 | "postcss-loader": "^3.0.0", 43 | "style-loader": "^0.23.1", 44 | "stylus": "^0.54.5", 45 | "stylus-loader": "^3.0.2", 46 | "url-loader": "^2.0.1", 47 | "vue-loader": "^15.7.0", 48 | "vue-template-compiler": "^2.6.10", 49 | "webpack": "^4.32.2", 50 | "webpack-bundle-analyzer": "^3.3.2", 51 | "webpack-cli": "^3.3.5", 52 | "webpack-dev-server": "^3.7.2", 53 | "webpack-merge": "^4.2.1" 54 | }, 55 | "author": "", 56 | "license": "ISC" 57 | } 58 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "src.js", 6 | "sideEffects": [ 7 | "*.vue" 8 | ], 9 | "scripts": { 10 | "dev": "webpack-dev-server --progress --config build/build.js", 11 | "build": "node build/build.js production", 12 | "mod": "node build/build.js mod", 13 | "dll": "webpack --config build/webpack.dll.conf.js", 14 | "test": "echo \"Error: no test specified\" && exit 1" 15 | }, 16 | "dependencies": { 17 | "loadsh": "^0.0.4", 18 | "vue": "^2.6.10", 19 | "vue-router": "^3.0.6", 20 | "vuex": "^3.1.1" 21 | }, 22 | "devDependencies": { 23 | "@babel/core": "^7.5.0", 24 | "@babel/plugin-syntax-dynamic-import": "^7.2.0", 25 | "@babel/preset-env": "^7.5.0", 26 | "add-asset-html-webpack-plugin": "^3.1.3", 27 | "autoprefixer": "^9.6.0", 28 | "babel-loader": "^8.0.6", 29 | "cache-loader": "^4.0.1", 30 | "chalk": "^2.4.2", 31 | "clean-webpack-plugin": "^3.0.0", 32 | "cli-spinner": "^0.2.10", 33 | "copy-webpack-plugin": "^5.0.3", 34 | "core-js": "^2.2.1", 35 | "css-loader": "^3.0.0", 36 | "eslint": "^6.0.1", 37 | "eslint-config-standard": "^13.0.0", 38 | "eslint-plugin-vue": "^5.2.3", 39 | "file-loader": "^4.0.0", 40 | "glob": "^7.1.4", 41 | "html-webpack-plugin": "^3.2.0", 42 | "mini-css-extract-plugin": "^0.7.0", 43 | "optimize-css-assets-webpack-plugin": "^5.0.3", 44 | "postcss-loader": "^3.0.0", 45 | "style-loader": "^0.23.1", 46 | "stylus": "^0.54.5", 47 | "stylus-loader": "^3.0.2", 48 | "url-loader": "^2.0.1", 49 | "vue-loader": "^15.7.0", 50 | "vue-template-compiler": "^2.6.10", 51 | "webpack": "^4.32.2", 52 | "webpack-bundle-analyzer": "^3.3.2", 53 | "webpack-cli": "^3.3.5", 54 | "webpack-dev-server": "^3.7.2", 55 | "webpack-merge": "^4.2.1" 56 | }, 57 | "author": "", 58 | "license": "ISC" 59 | } 60 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/build/build.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const chalk = require('chalk') 3 | const Spinner = require('cli-spinner').Spinner 4 | const { 5 | generateWebpackConfig, 6 | webpackStatsPrint 7 | } = require('./utils') 8 | 9 | // 环境传参 10 | const env = process.argv[2] 11 | // 生产环境 12 | const production = env === 'production' 13 | // 模块环境 14 | const mod = env === 'mod' 15 | 16 | if (production) { 17 | let config = generateWebpackConfig('production') 18 | 19 | let spinner = new Spinner('building: ') 20 | spinner.start() 21 | 22 | webpack(config, (err, stats) => { 23 | if (err || stats.hasErrors()) { 24 | webpackStatsPrint(stats) 25 | 26 | console.log(chalk.red('× Build failed with errors.\n')) 27 | process.exit() 28 | } 29 | 30 | webpackStatsPrint(stats) 31 | 32 | spinner.stop() 33 | 34 | console.log('\n') 35 | console.log(chalk.cyan('√ Build complete.\n')) 36 | console.log( 37 | chalk.yellow( 38 | ' Built files are meant to be served over an HTTP server.\n' + 39 | ' Opening index.html over file:// won\'t work.\n' 40 | ) 41 | ) 42 | }) 43 | } else if (mod) { 44 | const mods = process.argv.splice(3) 45 | mods.forEach(modName => { 46 | let config = generateWebpackConfig('mod', modName) 47 | 48 | let spinner = new Spinner(`${modName} building: `) 49 | spinner.start() 50 | 51 | webpack(config, (err, stats) => { 52 | if (err || stats.hasErrors()) { 53 | webpackStatsPrint(stats) 54 | 55 | console.log(chalk.red(`× ${modName} build failed with errors.\n`)) 56 | process.exit() 57 | } 58 | 59 | webpackStatsPrint(stats) 60 | 61 | spinner.stop() 62 | 63 | console.log('\n') 64 | console.log(chalk.cyan(`√ ${modName} build complete.\n`)) 65 | console.log( 66 | chalk.yellow( 67 | ' Module should be loaded by base project.\n' 68 | ) 69 | ) 70 | }) 71 | }) 72 | } else { 73 | module.exports = generateWebpackConfig('development') 74 | } 75 | -------------------------------------------------------------------------------- /3. 处理图片、样式和字体/demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 4 | 5 | module.exports = { 6 | mode: 'development', 7 | entry: './src/main.js', 8 | output: { 9 | filename: 'dist.js', 10 | path: path.resolve(__dirname, './dist') 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.(png|jpe?g|gif|webp)$/, 16 | use: [ 17 | { 18 | loader: 'url-loader', 19 | options: { 20 | // 文件命名 21 | name: '[name].[ext]', 22 | // 输出路径 23 | outputPath: 'imgs/', 24 | // 小于 10k 的图片转成 base64 编码 25 | limit: 10240 26 | } 27 | } 28 | ] 29 | }, 30 | { 31 | test: /\.styl(us)?$/, 32 | use: [ 33 | { 34 | loader: MiniCssExtractPlugin.loader, 35 | options: { 36 | publicPath: '../', 37 | hmr: process.env.NODE_ENV === 'development', 38 | reloadAll: true 39 | } 40 | }, 41 | { 42 | loader: 'css-loader', 43 | options: { 44 | importLoaders: 2 // 在 css-loader 前执行的 loader 数量 45 | } 46 | }, 47 | 'postcss-loader', 48 | { 49 | loader: 'stylus-loader', 50 | options: { 51 | preferPathResolver: 'webpack' // 优先使用 webpack 用于路径解析，找不到再使用 stylus-loader 的路径解析 52 | } 53 | } 54 | ] 55 | }, 56 | { 57 | test: /\.css$/, 58 | use: [ 59 | 'style-loader', 60 | 'css-loader' 61 | ] 62 | }, 63 | { 64 | test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/i, 65 | use: { 66 | loader: 'file-loader', 67 | options: { 68 | name: '[name].[ext]', 69 | outputPath: 'fonts/' 70 | } 71 | } 72 | } 73 | ], 74 | }, 75 | plugins: [ 76 | new HtmlWebpackPlugin(), 77 | new MiniCssExtractPlugin({ 78 | filename: 'css/[name].css', 79 | chunkFilename: 'css/[name].css' 80 | }) 81 | ] 82 | } 83 | -------------------------------------------------------------------------------- /1. 起步/起步.md: -------------------------------------------------------------------------------- 1 | ## 定义 2 | Webpack 是一个 **Javascript** 应用程序的**静态模块打包器**，它会读取 Javascript 文件所需依赖，并把他们打包到一个或多个目标文件。 3 | 4 | *值得注意的是，Webpack 只能解析 Javascript 文件，处理其他类型文件需要各自的 loader / plugin* 5 | 6 | ## 安装 7 | 准备安装 Webpack 之前请确认你已安装 Nodejs 最新稳定版本，过旧版本可能会缺少 Webpack 需要的包。 8 | 9 | ```bash 10 | yarn global add webpack 11 | ``` 12 | 13 | 如果需要在命令行中使用 webpack 命令，webpack 4+ 版本还需要安装 `webpack-cli` ，如使用时未安装它会提醒你安装。 14 | 15 | ```bash 16 | yarn global add webpack-cli 17 | ``` 18 | 19 | *全局使用命令前还需要把 `webpack.cmd` 所在目录（yarn bin）添加到环境变量，使用 `yarn global bin` 查看该目录具体路径* 20 | 21 | ## 命令行打包和配置 22 | - 新建 `src.js` 文件 23 | ```javascript 24 | function counter() { 25 | if (!counter.count) counter.count = 0 26 | counter.count++ 27 | } 28 | 29 | counter() 30 | 31 | console.log(counter.count) 32 | ``` 33 | - 打包 `src.js` 并把打包结果写入到同目录下的 `dist.js` 34 | ```bash 35 | webpack src.js -o dist.js --mode="development" 36 | ``` 37 | `-o dist.js` 指定生成文件的的路径和文件名，它可以拆分为 `--output-path="./" --output-filename="dist.js"` 38 | 39 | `--mode="development"` 指定开发环境，打包后的代码不压缩 40 | 41 | 事实上像这样单文件的打包 Webpack 并不能做什么神奇的事，我们可以在 `dist.js` 中看到，打包生成代码由两部分组成： `__webpack_require__` 函数和 `eval` 执行 `src.js` 源码。 42 | 43 | 由于实际使用时 webpack 配置比较复杂，在命令行中极难阅读且不能满足所有需求，这里就不再继续展开，后文的重点也将放在如何修改配置文件以应对不同需求，更多命令行配置见参考文档“命令行接口”。 44 | 45 | ## 使用配置文件 46 | 47 | 为 webpack 指定配置文件有两种方式： 48 | 1. 用 `--config` 指定配置文件，`webpack --config webpack.config.js` 49 | 2. 使用 Webpack Node.js API ，在 Node.js 代码中调用 `webpack` 函数 50 | 51 | 下方的例子我们使用第一种方式，实际项目中第二种方式会更常见，因为可以自定义打包的信息展示（比如等待动画、日志），后文我也会讲到。 52 | 53 | - 新建 `webpack.config.js` 文件 54 | ```javascript 55 | const path = require('path') 56 | 57 | module.exports = { 58 | mode: 'development', 59 | entry: './src.js', 60 | output: { 61 | filename: 'dist.js', 62 | path: path.resolve(__dirname, './') 63 | } 64 | } 65 | ``` 66 | - 打包 `src.js` 并把打包结果写入到同目录下的 `dist.js` 67 | ```bash 68 | webpack --config webpack.config.js 69 | ``` 70 | 可以看到，打包结果和上方一样。 71 | 72 | Webpack 默认配置文件是当前目录的 `webpack.config.js` ，所以上面的命令可以简化为 `webpack` 73 | 74 | ## 参考文档 75 | - [[ Webpack Docs ] 安装](https://www.webpackjs.com/guides/installation/) 76 | - [[ Webpack Docs ] 起步](https://www.webpackjs.com/guides/getting-started/) 77 | - [[ Webpack Docs ] 命令行接口](https://www.webpackjs.com/api/cli/) 78 | -------------------------------------------------------------------------------- /6. 优化/demo/build/utils.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const AddAssestHtmlWebpackPlugin = require('add-asset-html-webpack-plugin') 3 | const glob = require('glob') 4 | const merge = require('webpack-merge') 5 | const path = require('path') 6 | 7 | const _memorize = fn => { 8 | const cache = {} 9 | return (...args) => { 10 | const _args = JSON.stringify(args) 11 | return cache[_args] || (cache[_args] = fn.call(this, ...args)) 12 | } 13 | } 14 | 15 | const _resolve = (...args) => { 16 | return path.join(__dirname, '..', ...args) 17 | } 18 | 19 | const resolve = _memorize(_resolve) 20 | 21 | /** 22 | * @description 引用和 dll 建立映射关系 23 | */ 24 | const generateDllReferences = function() { 25 | const manifests = glob.sync(`${resolve('dll')}/*.json`) 26 | 27 | return manifests.map(file => { 28 | return new webpack.DllReferencePlugin({ 29 | // context: resolve(''), 30 | manifest: file 31 | }) 32 | }) 33 | } 34 | 35 | /** 36 | * @description 把 dll 加入到 html 文件 37 | */ 38 | const generateAddAssests = function() { 39 | const dlls = glob.sync(`${resolve('dll')}/*.js`) 40 | 41 | return dlls.map(file => { 42 | return new AddAssestHtmlWebpackPlugin({ 43 | filepath: file, 44 | outputPath: '/dll', 45 | publicPath: '/dll' 46 | }) 47 | }) 48 | } 49 | 50 | const generateWebpackConfig = production => { 51 | if (production) { 52 | process.env.NODE_ENV = 'production' 53 | return merge(require('./webpack.base.conf'), require('./webpack.prod.conf')) 54 | } else { 55 | process.env.NODE_ENV = 'development' 56 | return merge(require('./webpack.base.conf'), require('./webpack.dev.conf')) 57 | } 58 | } 59 | 60 | const webpackStatsPrint = function (stats) { 61 | console.log( 62 | stats 63 | .toString({ 64 | colors: true, 65 | modules: false, 66 | // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 67 | children: false, 68 | chunks: false, 69 | chunkModules: false 70 | }) 71 | .replace(/\n.*?static.*?(?=\n)/g, '') + '\n' 72 | ) 73 | } 74 | 75 | module.exports = { 76 | resolve, 77 | generateDllReferences, 78 | generateAddAssests, 79 | generateWebpackConfig, 80 | webpackStatsPrint 81 | } 82 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/build/utils.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const AddAssestHtmlWebpackPlugin = require('add-asset-html-webpack-plugin') 3 | const glob = require('glob') 4 | const merge = require('webpack-merge') 5 | const path = require('path') 6 | 7 | const _memorize = fn => { 8 | const cache = {} 9 | return (...args) => { 10 | const _args = JSON.stringify(args) 11 | return cache[_args] || (cache[_args] = fn.call(this, ...args)) 12 | } 13 | } 14 | 15 | const _resolve = (...args) => { 16 | return path.join(__dirname, '..', ...args) 17 | } 18 | 19 | const resolve = _memorize(_resolve) 20 | 21 | /** 22 | * @description 引用和 dll 建立映射关系 23 | */ 24 | const generateDllReferences = function () { 25 | const manifests = glob.sync(`${resolve('dll')}/*.json`) 26 | 27 | return manifests.map(file => { 28 | return new webpack.DllReferencePlugin({ 29 | // context: resolve(''), 30 | manifest: file 31 | }) 32 | }) 33 | } 34 | 35 | /** 36 | * @description 把 dll 加入到 html 文件 37 | */ 38 | const generateAddAssests = function () { 39 | const dlls = glob.sync(`${resolve('dll')}/*.js`) 40 | 41 | return dlls.map(file => { 42 | return new AddAssestHtmlWebpackPlugin({ 43 | filepath: file, 44 | outputPath: '/dll', 45 | publicPath: '/dll' 46 | }) 47 | }) 48 | } 49 | 50 | /** 51 | * @description 生成 webpack 配置文件 52 | * @param {String} env 环境 53 | * @param {String} modName mod 名， mod 环境下特有属性 54 | */ 55 | const generateWebpackConfig = (env, modName = '') => { 56 | process.env.NODE_ENV = env 57 | if (env === 'production') { 58 | return merge(require('./webpack.base.conf'), require('./webpack.prod.conf')) 59 | } else if (env === 'mod') { 60 | return merge(require('./webpack.base.conf'), require('./webpack.mod.conf')(modName)) 61 | } else { 62 | return merge(require('./webpack.base.conf'), require('./webpack.dev.conf')) 63 | } 64 | } 65 | 66 | const webpackStatsPrint = function (stats) { 67 | console.log( 68 | stats 69 | .toString({ 70 | colors: true, 71 | modules: false, 72 | // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 73 | children: false, 74 | chunks: false, 75 | chunkModules: false 76 | }) 77 | .replace(/\n.*?static.*?(?=\n)/g, '') + '\n' 78 | ) 79 | } 80 | 81 | module.exports = { 82 | resolve, 83 | generateDllReferences, 84 | generateAddAssests, 85 | generateWebpackConfig, 86 | webpackStatsPrint 87 | } 88 | -------------------------------------------------------------------------------- /6. 优化/demo/nginx-conf/nginx.conf: -------------------------------------------------------------------------------- 1 | 2 | #user nobody; 3 | worker_processes 1; 4 | 5 | #error_log logs/error.log; 6 | #error_log logs/error.log notice; 7 | #error_log logs/error.log info; 8 | 9 | #pid logs/nginx.pid; 10 | 11 | 12 | events { 13 | worker_connections 1024; 14 | } 15 | 16 | 17 | http { 18 | include mime.types; 19 | default_type application/octet-stream; 20 | 21 | sendfile on; 22 | #tcp_nopush on; 23 | 24 | #keepalive_timeout 0; 25 | keepalive_timeout 65; 26 | 27 | # 开启gzip压缩功能 28 | gzip on; 29 | # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 30 | gzip_min_length 1k; 31 | # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明 32 | gzip_comp_level 2; 33 | # 进行压缩的文件类型。javascript有多种形式。其中的值可以在mime.types文件中找到。 34 | gzip_types text/plain application/javascript application/x-javascript text/css application/xml application/json text/javascript application/x-httpd-php image/jpg image/jpeg image/gif image/png image/bmp image/ico; 35 | # 是否在http header中添加Vary: Accept-Encoding，建议开启 36 | gzip_vary on; 37 | # 禁用IE 6 gzip 38 | gzip_disable "MSIE [1-6]\."; 39 | 40 | # 允许跨域ip端口map 41 | map $http_origin $allow_origins { 42 | default 0; 43 | "~http://127.0.0.1:8009" http://127.0.0.1:8009; 44 | "~http://localhost:8009" http://localhost:8009; 45 | "~http://127.0.0.1:8010" http://127.0.0.1:8010; 46 | "~http://127.0.0.1:8011" http://127.0.0.1:8011; 47 | "~http://localhost:8011" http://localhost:8011; 48 | "~http://localhost:8012" http://localhost:8012; 49 | "~http://localhost:9009" http://localhost:9009; 50 | "~http://192.168.186.214:9009" http://192.168.186.214:9009; 51 | } 52 | 53 | include conf/*.conf; 54 | 55 | # another virtual host using mix of IP-, name-, and port-based configuration 56 | # 57 | #server { 58 | # listen 8000; 59 | # listen somename:8080; 60 | # server_name somename alias another.alias; 61 | 62 | # location / { 63 | # root html; 64 | # index index.html index.htm; 65 | # } 66 | #} 67 | 68 | 69 | # HTTPS server 70 | # 71 | #server { 72 | # listen 443 ssl; 73 | # server_name localhost; 74 | 75 | # ssl_certificate cert.pem; 76 | # ssl_certificate_key cert.key; 77 | 78 | # ssl_session_cache shared:SSL:1m; 79 | # ssl_session_timeout 5m; 80 | 81 | # ssl_ciphers HIGH:!aNULL:!MD5; 82 | # ssl_prefer_server_ciphers on; 83 | 84 | # location / { 85 | # root html; 86 | # index index.html index.htm; 87 | # } 88 | #} 89 | } 90 | -------------------------------------------------------------------------------- /5. 开发服务/demo/nginx-conf/nginx.conf: -------------------------------------------------------------------------------- 1 | 2 | #user nobody; 3 | worker_processes 1; 4 | 5 | #error_log logs/error.log; 6 | #error_log logs/error.log notice; 7 | #error_log logs/error.log info; 8 | 9 | #pid logs/nginx.pid; 10 | 11 | 12 | events { 13 | worker_connections 1024; 14 | } 15 | 16 | 17 | http { 18 | include mime.types; 19 | default_type application/octet-stream; 20 | 21 | sendfile on; 22 | #tcp_nopush on; 23 | 24 | #keepalive_timeout 0; 25 | keepalive_timeout 65; 26 | 27 | # 开启gzip压缩功能 28 | gzip on; 29 | # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 30 | gzip_min_length 1k; 31 | # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明 32 | gzip_comp_level 2; 33 | # 进行压缩的文件类型。javascript有多种形式。其中的值可以在mime.types文件中找到。 34 | gzip_types text/plain application/javascript application/x-javascript text/css application/xml application/json text/javascript application/x-httpd-php image/jpg image/jpeg image/gif image/png image/bmp image/ico; 35 | # 是否在http header中添加Vary: Accept-Encoding，建议开启 36 | gzip_vary on; 37 | # 禁用IE 6 gzip 38 | gzip_disable "MSIE [1-6]\."; 39 | 40 | # 允许跨域ip端口map 41 | map $http_origin $allow_origins { 42 | default 0; 43 | "~http://127.0.0.1:8009" http://127.0.0.1:8009; 44 | "~http://localhost:8009" http://localhost:8009; 45 | "~http://127.0.0.1:8010" http://127.0.0.1:8010; 46 | "~http://127.0.0.1:8011" http://127.0.0.1:8011; 47 | "~http://localhost:8011" http://localhost:8011; 48 | "~http://localhost:8012" http://localhost:8012; 49 | "~http://localhost:9009" http://localhost:9009; 50 | "~http://192.168.186.214:9009" http://192.168.186.214:9009; 51 | } 52 | 53 | include conf/*.conf; 54 | 55 | # another virtual host using mix of IP-, name-, and port-based configuration 56 | # 57 | #server { 58 | # listen 8000; 59 | # listen somename:8080; 60 | # server_name somename alias another.alias; 61 | 62 | # location / { 63 | # root html; 64 | # index index.html index.htm; 65 | # } 66 | #} 67 | 68 | 69 | # HTTPS server 70 | # 71 | #server { 72 | # listen 443 ssl; 73 | # server_name localhost; 74 | 75 | # ssl_certificate cert.pem; 76 | # ssl_certificate_key cert.key; 77 | 78 | # ssl_session_cache shared:SSL:1m; 79 | # ssl_session_timeout 5m; 80 | 81 | # ssl_ciphers HIGH:!aNULL:!MD5; 82 | # ssl_prefer_server_ciphers on; 83 | 84 | # location / { 85 | # root html; 86 | # index index.html index.htm; 87 | # } 88 | #} 89 | } 90 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/nginx-conf/nginx.conf: -------------------------------------------------------------------------------- 1 | 2 | #user nobody; 3 | worker_processes 1; 4 | 5 | #error_log logs/error.log; 6 | #error_log logs/error.log notice; 7 | #error_log logs/error.log info; 8 | 9 | #pid logs/nginx.pid; 10 | 11 | 12 | events { 13 | worker_connections 1024; 14 | } 15 | 16 | 17 | http { 18 | include mime.types; 19 | default_type application/octet-stream; 20 | 21 | sendfile on; 22 | #tcp_nopush on; 23 | 24 | #keepalive_timeout 0; 25 | keepalive_timeout 65; 26 | 27 | # 开启gzip压缩功能 28 | gzip on; 29 | # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 30 | gzip_min_length 1k; 31 | # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明 32 | gzip_comp_level 2; 33 | # 进行压缩的文件类型。javascript有多种形式。其中的值可以在mime.types文件中找到。 34 | gzip_types text/plain application/javascript application/x-javascript text/css application/xml application/json text/javascript application/x-httpd-php image/jpg image/jpeg image/gif image/png image/bmp image/ico; 35 | # 是否在http header中添加Vary: Accept-Encoding，建议开启 36 | gzip_vary on; 37 | # 禁用IE 6 gzip 38 | gzip_disable "MSIE [1-6]\."; 39 | 40 | # 允许跨域ip端口map 41 | map $http_origin $allow_origins { 42 | default 0; 43 | "~http://127.0.0.1:8009" http://127.0.0.1:8009; 44 | "~http://localhost:8009" http://localhost:8009; 45 | "~http://127.0.0.1:8010" http://127.0.0.1:8010; 46 | "~http://127.0.0.1:8011" http://127.0.0.1:8011; 47 | "~http://localhost:8011" http://localhost:8011; 48 | "~http://localhost:8012" http://localhost:8012; 49 | "~http://localhost:9009" http://localhost:9009; 50 | "~http://192.168.186.214:9009" http://192.168.186.214:9009; 51 | } 52 | 53 | include conf/*.conf; 54 | 55 | # another virtual host using mix of IP-, name-, and port-based configuration 56 | # 57 | #server { 58 | # listen 8000; 59 | # listen somename:8080; 60 | # server_name somename alias another.alias; 61 | 62 | # location / { 63 | # root html; 64 | # index index.html index.htm; 65 | # } 66 | #} 67 | 68 | 69 | # HTTPS server 70 | # 71 | #server { 72 | # listen 443 ssl; 73 | # server_name localhost; 74 | 75 | # ssl_certificate cert.pem; 76 | # ssl_certificate_key cert.key; 77 | 78 | # ssl_session_cache shared:SSL:1m; 79 | # ssl_session_timeout 5m; 80 | 81 | # ssl_ciphers HIGH:!aNULL:!MD5; 82 | # ssl_prefer_server_ciphers on; 83 | 84 | # location / { 85 | # root html; 86 | # index index.html index.htm; 87 | # } 88 | #} 89 | } 90 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/nginx-conf/nginx.conf: -------------------------------------------------------------------------------- 1 | 2 | #user nobody; 3 | worker_processes 1; 4 | 5 | #error_log logs/error.log; 6 | #error_log logs/error.log notice; 7 | #error_log logs/error.log info; 8 | 9 | #pid logs/nginx.pid; 10 | 11 | 12 | events { 13 | worker_connections 1024; 14 | } 15 | 16 | 17 | http { 18 | include mime.types; 19 | default_type application/octet-stream; 20 | 21 | sendfile on; 22 | #tcp_nopush on; 23 | 24 | #keepalive_timeout 0; 25 | keepalive_timeout 65; 26 | 27 | # 开启gzip压缩功能 28 | gzip on; 29 | # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 30 | gzip_min_length 1k; 31 | # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明 32 | gzip_comp_level 2; 33 | # 进行压缩的文件类型。javascript有多种形式。其中的值可以在mime.types文件中找到。 34 | gzip_types text/plain application/javascript application/x-javascript text/css application/xml application/json text/javascript application/x-httpd-php image/jpg image/jpeg image/gif image/png image/bmp image/ico; 35 | # 是否在http header中添加Vary: Accept-Encoding，建议开启 36 | gzip_vary on; 37 | # 禁用IE 6 gzip 38 | gzip_disable "MSIE [1-6]\."; 39 | 40 | # 允许跨域ip端口map 41 | map $http_origin $allow_origins { 42 | default 0; 43 | "~http://127.0.0.1:8009" http://127.0.0.1:8009; 44 | "~http://localhost:8009" http://localhost:8009; 45 | "~http://127.0.0.1:8010" http://127.0.0.1:8010; 46 | "~http://127.0.0.1:8011" http://127.0.0.1:8011; 47 | "~http://localhost:8011" http://localhost:8011; 48 | "~http://localhost:8012" http://localhost:8012; 49 | "~http://localhost:9009" http://localhost:9009; 50 | "~http://192.168.186.214:9009" http://192.168.186.214:9009; 51 | } 52 | 53 | include conf/*.conf; 54 | 55 | # another virtual host using mix of IP-, name-, and port-based configuration 56 | # 57 | #server { 58 | # listen 8000; 59 | # listen somename:8080; 60 | # server_name somename alias another.alias; 61 | 62 | # location / { 63 | # root html; 64 | # index index.html index.htm; 65 | # } 66 | #} 67 | 68 | 69 | # HTTPS server 70 | # 71 | #server { 72 | # listen 443 ssl; 73 | # server_name localhost; 74 | 75 | # ssl_certificate cert.pem; 76 | # ssl_certificate_key cert.key; 77 | 78 | # ssl_session_cache shared:SSL:1m; 79 | # ssl_session_timeout 5m; 80 | 81 | # ssl_ciphers HIGH:!aNULL:!MD5; 82 | # ssl_prefer_server_ciphers on; 83 | 84 | # location / { 85 | # root html; 86 | # index index.html index.htm; 87 | # } 88 | #} 89 | } 90 | -------------------------------------------------------------------------------- /6. 优化/demo/nginx-conf/koi-win: -------------------------------------------------------------------------------- 1 | 2 | charset_map koi8-r windows-1251 { 3 | 4 | 80 88 ; # euro 5 | 6 | 95 95 ; # bullet 7 | 8 | 9A A0 ; #   9 | 10 | 9E B7 ; # · 11 | 12 | A3 B8 ; # small yo 13 | A4 BA ; # small Ukrainian ye 14 | 15 | A6 B3 ; # small Ukrainian i 16 | A7 BF ; # small Ukrainian yi 17 | 18 | AD B4 ; # small Ukrainian soft g 19 | AE A2 ; # small Byelorussian short u 20 | 21 | B0 B0 ; # ° 22 | 23 | B3 A8 ; # capital YO 24 | B4 AA ; # capital Ukrainian YE 25 | 26 | B6 B2 ; # capital Ukrainian I 27 | B7 AF ; # capital Ukrainian YI 28 | 29 | B9 B9 ; # numero sign 30 | 31 | BD A5 ; # capital Ukrainian soft G 32 | BE A1 ; # capital Byelorussian short U 33 | 34 | BF A9 ; # (C) 35 | 36 | C0 FE ; # small yu 37 | C1 E0 ; # small a 38 | C2 E1 ; # small b 39 | C3 F6 ; # small ts 40 | C4 E4 ; # small d 41 | C5 E5 ; # small ye 42 | C6 F4 ; # small f 43 | C7 E3 ; # small g 44 | C8 F5 ; # small kh 45 | C9 E8 ; # small i 46 | CA E9 ; # small j 47 | CB EA ; # small k 48 | CC EB ; # small l 49 | CD EC ; # small m 50 | CE ED ; # small n 51 | CF EE ; # small o 52 | 53 | D0 EF ; # small p 54 | D1 FF ; # small ya 55 | D2 F0 ; # small r 56 | D3 F1 ; # small s 57 | D4 F2 ; # small t 58 | D5 F3 ; # small u 59 | D6 E6 ; # small zh 60 | D7 E2 ; # small v 61 | D8 FC ; # small soft sign 62 | D9 FB ; # small y 63 | DA E7 ; # small z 64 | DB F8 ; # small sh 65 | DC FD ; # small e 66 | DD F9 ; # small shch 67 | DE F7 ; # small ch 68 | DF FA ; # small hard sign 69 | 70 | E0 DE ; # capital YU 71 | E1 C0 ; # capital A 72 | E2 C1 ; # capital B 73 | E3 D6 ; # capital TS 74 | E4 C4 ; # capital D 75 | E5 C5 ; # capital YE 76 | E6 D4 ; # capital F 77 | E7 C3 ; # capital G 78 | E8 D5 ; # capital KH 79 | E9 C8 ; # capital I 80 | EA C9 ; # capital J 81 | EB CA ; # capital K 82 | EC CB ; # capital L 83 | ED CC ; # capital M 84 | EE CD ; # capital N 85 | EF CE ; # capital O 86 | 87 | F0 CF ; # capital P 88 | F1 DF ; # capital YA 89 | F2 D0 ; # capital R 90 | F3 D1 ; # capital S 91 | F4 D2 ; # capital T 92 | F5 D3 ; # capital U 93 | F6 C6 ; # capital ZH 94 | F7 C2 ; # capital V 95 | F8 DC ; # capital soft sign 96 | F9 DB ; # capital Y 97 | FA C7 ; # capital Z 98 | FB D8 ; # capital SH 99 | FC DD ; # capital E 100 | FD D9 ; # capital SHCH 101 | FE D7 ; # capital CH 102 | FF DA ; # capital hard sign 103 | } 104 | -------------------------------------------------------------------------------- /5. 开发服务/demo/nginx-conf/koi-win: -------------------------------------------------------------------------------- 1 | 2 | charset_map koi8-r windows-1251 { 3 | 4 | 80 88 ; # euro 5 | 6 | 95 95 ; # bullet 7 | 8 | 9A A0 ; #   9 | 10 | 9E B7 ; # · 11 | 12 | A3 B8 ; # small yo 13 | A4 BA ; # small Ukrainian ye 14 | 15 | A6 B3 ; # small Ukrainian i 16 | A7 BF ; # small Ukrainian yi 17 | 18 | AD B4 ; # small Ukrainian soft g 19 | AE A2 ; # small Byelorussian short u 20 | 21 | B0 B0 ; # ° 22 | 23 | B3 A8 ; # capital YO 24 | B4 AA ; # capital Ukrainian YE 25 | 26 | B6 B2 ; # capital Ukrainian I 27 | B7 AF ; # capital Ukrainian YI 28 | 29 | B9 B9 ; # numero sign 30 | 31 | BD A5 ; # capital Ukrainian soft G 32 | BE A1 ; # capital Byelorussian short U 33 | 34 | BF A9 ; # (C) 35 | 36 | C0 FE ; # small yu 37 | C1 E0 ; # small a 38 | C2 E1 ; # small b 39 | C3 F6 ; # small ts 40 | C4 E4 ; # small d 41 | C5 E5 ; # small ye 42 | C6 F4 ; # small f 43 | C7 E3 ; # small g 44 | C8 F5 ; # small kh 45 | C9 E8 ; # small i 46 | CA E9 ; # small j 47 | CB EA ; # small k 48 | CC EB ; # small l 49 | CD EC ; # small m 50 | CE ED ; # small n 51 | CF EE ; # small o 52 | 53 | D0 EF ; # small p 54 | D1 FF ; # small ya 55 | D2 F0 ; # small r 56 | D3 F1 ; # small s 57 | D4 F2 ; # small t 58 | D5 F3 ; # small u 59 | D6 E6 ; # small zh 60 | D7 E2 ; # small v 61 | D8 FC ; # small soft sign 62 | D9 FB ; # small y 63 | DA E7 ; # small z 64 | DB F8 ; # small sh 65 | DC FD ; # small e 66 | DD F9 ; # small shch 67 | DE F7 ; # small ch 68 | DF FA ; # small hard sign 69 | 70 | E0 DE ; # capital YU 71 | E1 C0 ; # capital A 72 | E2 C1 ; # capital B 73 | E3 D6 ; # capital TS 74 | E4 C4 ; # capital D 75 | E5 C5 ; # capital YE 76 | E6 D4 ; # capital F 77 | E7 C3 ; # capital G 78 | E8 D5 ; # capital KH 79 | E9 C8 ; # capital I 80 | EA C9 ; # capital J 81 | EB CA ; # capital K 82 | EC CB ; # capital L 83 | ED CC ; # capital M 84 | EE CD ; # capital N 85 | EF CE ; # capital O 86 | 87 | F0 CF ; # capital P 88 | F1 DF ; # capital YA 89 | F2 D0 ; # capital R 90 | F3 D1 ; # capital S 91 | F4 D2 ; # capital T 92 | F5 D3 ; # capital U 93 | F6 C6 ; # capital ZH 94 | F7 C2 ; # capital V 95 | F8 DC ; # capital soft sign 96 | F9 DB ; # capital Y 97 | FA C7 ; # capital Z 98 | FB D8 ; # capital SH 99 | FC DD ; # capital E 100 | FD D9 ; # capital SHCH 101 | FE D7 ; # capital CH 102 | FF DA ; # capital hard sign 103 | } 104 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/nginx-conf/koi-win: -------------------------------------------------------------------------------- 1 | 2 | charset_map koi8-r windows-1251 { 3 | 4 | 80 88 ; # euro 5 | 6 | 95 95 ; # bullet 7 | 8 | 9A A0 ; #   9 | 10 | 9E B7 ; # · 11 | 12 | A3 B8 ; # small yo 13 | A4 BA ; # small Ukrainian ye 14 | 15 | A6 B3 ; # small Ukrainian i 16 | A7 BF ; # small Ukrainian yi 17 | 18 | AD B4 ; # small Ukrainian soft g 19 | AE A2 ; # small Byelorussian short u 20 | 21 | B0 B0 ; # ° 22 | 23 | B3 A8 ; # capital YO 24 | B4 AA ; # capital Ukrainian YE 25 | 26 | B6 B2 ; # capital Ukrainian I 27 | B7 AF ; # capital Ukrainian YI 28 | 29 | B9 B9 ; # numero sign 30 | 31 | BD A5 ; # capital Ukrainian soft G 32 | BE A1 ; # capital Byelorussian short U 33 | 34 | BF A9 ; # (C) 35 | 36 | C0 FE ; # small yu 37 | C1 E0 ; # small a 38 | C2 E1 ; # small b 39 | C3 F6 ; # small ts 40 | C4 E4 ; # small d 41 | C5 E5 ; # small ye 42 | C6 F4 ; # small f 43 | C7 E3 ; # small g 44 | C8 F5 ; # small kh 45 | C9 E8 ; # small i 46 | CA E9 ; # small j 47 | CB EA ; # small k 48 | CC EB ; # small l 49 | CD EC ; # small m 50 | CE ED ; # small n 51 | CF EE ; # small o 52 | 53 | D0 EF ; # small p 54 | D1 FF ; # small ya 55 | D2 F0 ; # small r 56 | D3 F1 ; # small s 57 | D4 F2 ; # small t 58 | D5 F3 ; # small u 59 | D6 E6 ; # small zh 60 | D7 E2 ; # small v 61 | D8 FC ; # small soft sign 62 | D9 FB ; # small y 63 | DA E7 ; # small z 64 | DB F8 ; # small sh 65 | DC FD ; # small e 66 | DD F9 ; # small shch 67 | DE F7 ; # small ch 68 | DF FA ; # small hard sign 69 | 70 | E0 DE ; # capital YU 71 | E1 C0 ; # capital A 72 | E2 C1 ; # capital B 73 | E3 D6 ; # capital TS 74 | E4 C4 ; # capital D 75 | E5 C5 ; # capital YE 76 | E6 D4 ; # capital F 77 | E7 C3 ; # capital G 78 | E8 D5 ; # capital KH 79 | E9 C8 ; # capital I 80 | EA C9 ; # capital J 81 | EB CA ; # capital K 82 | EC CB ; # capital L 83 | ED CC ; # capital M 84 | EE CD ; # capital N 85 | EF CE ; # capital O 86 | 87 | F0 CF ; # capital P 88 | F1 DF ; # capital YA 89 | F2 D0 ; # capital R 90 | F3 D1 ; # capital S 91 | F4 D2 ; # capital T 92 | F5 D3 ; # capital U 93 | F6 C6 ; # capital ZH 94 | F7 C2 ; # capital V 95 | F8 DC ; # capital soft sign 96 | F9 DB ; # capital Y 97 | FA C7 ; # capital Z 98 | FB D8 ; # capital SH 99 | FC DD ; # capital E 100 | FD D9 ; # capital SHCH 101 | FE D7 ; # capital CH 102 | FF DA ; # capital hard sign 103 | } 104 | -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/nginx-conf/koi-win: -------------------------------------------------------------------------------- 1 | 2 | charset_map koi8-r windows-1251 { 3 | 4 | 80 88 ; # euro 5 | 6 | 95 95 ; # bullet 7 | 8 | 9A A0 ; #   9 | 10 | 9E B7 ; # · 11 | 12 | A3 B8 ; # small yo 13 | A4 BA ; # small Ukrainian ye 14 | 15 | A6 B3 ; # small Ukrainian i 16 | A7 BF ; # small Ukrainian yi 17 | 18 | AD B4 ; # small Ukrainian soft g 19 | AE A2 ; # small Byelorussian short u 20 | 21 | B0 B0 ; # ° 22 | 23 | B3 A8 ; # capital YO 24 | B4 AA ; # capital Ukrainian YE 25 | 26 | B6 B2 ; # capital Ukrainian I 27 | B7 AF ; # capital Ukrainian YI 28 | 29 | B9 B9 ; # numero sign 30 | 31 | BD A5 ; # capital Ukrainian soft G 32 | BE A1 ; # capital Byelorussian short U 33 | 34 | BF A9 ; # (C) 35 | 36 | C0 FE ; # small yu 37 | C1 E0 ; # small a 38 | C2 E1 ; # small b 39 | C3 F6 ; # small ts 40 | C4 E4 ; # small d 41 | C5 E5 ; # small ye 42 | C6 F4 ; # small f 43 | C7 E3 ; # small g 44 | C8 F5 ; # small kh 45 | C9 E8 ; # small i 46 | CA E9 ; # small j 47 | CB EA ; # small k 48 | CC EB ; # small l 49 | CD EC ; # small m 50 | CE ED ; # small n 51 | CF EE ; # small o 52 | 53 | D0 EF ; # small p 54 | D1 FF ; # small ya 55 | D2 F0 ; # small r 56 | D3 F1 ; # small s 57 | D4 F2 ; # small t 58 | D5 F3 ; # small u 59 | D6 E6 ; # small zh 60 | D7 E2 ; # small v 61 | D8 FC ; # small soft sign 62 | D9 FB ; # small y 63 | DA E7 ; # small z 64 | DB F8 ; # small sh 65 | DC FD ; # small e 66 | DD F9 ; # small shch 67 | DE F7 ; # small ch 68 | DF FA ; # small hard sign 69 | 70 | E0 DE ; # capital YU 71 | E1 C0 ; # capital A 72 | E2 C1 ; # capital B 73 | E3 D6 ; # capital TS 74 | E4 C4 ; # capital D 75 | E5 C5 ; # capital YE 76 | E6 D4 ; # capital F 77 | E7 C3 ; # capital G 78 | E8 D5 ; # capital KH 79 | E9 C8 ; # capital I 80 | EA C9 ; # capital J 81 | EB CA ; # capital K 82 | EC CB ; # capital L 83 | ED CC ; # capital M 84 | EE CD ; # capital N 85 | EF CE ; # capital O 86 | 87 | F0 CF ; # capital P 88 | F1 DF ; # capital YA 89 | F2 D0 ; # capital R 90 | F3 D1 ; # capital S 91 | F4 D2 ; # capital T 92 | F5 D3 ; # capital U 93 | F6 C6 ; # capital ZH 94 | F7 C2 ; # capital V 95 | F8 DC ; # capital soft sign 96 | F9 DB ; # capital Y 97 | FA C7 ; # capital Z 98 | FB D8 ; # capital SH 99 | FC DD ; # capital E 100 | FD D9 ; # capital SHCH 101 | FE D7 ; # capital CH 102 | FF DA ; # capital hard sign 103 | } 104 | -------------------------------------------------------------------------------- /5. 开发服务/demo/nginx-conf/conf/80-dev-server-api.conf: -------------------------------------------------------------------------------- 1 | # 开发时代理服务 2 | server { 3 | listen 80; 4 | server_name 127.0.0.1; 5 | 6 | #字符集 7 | charset utf-8; 8 | 9 | # 统一登录代理 10 | location ^~ /proxy/ { 11 | # rewrite ^/proxy/(.*)$ /$1 break; 12 | # proxy_pass http://127.0.0.1:8010/; # 本机服务 13 | # proxy_pass http://192.168.243.157:80/; # 沈达 14 | # proxy_pass http://192.168.243.159:8080/; # 晓东 15 | # proxy_pass http://10.26.200.42:8090/iop/; # 佳雨 16 | proxy_pass http://10.26.201.186:7070/; # 小康 17 | # proxy_pass http://10.26.200.71:8072/iop/; # 宏泰 18 | # proxy_pass http://10.253.173.207:8090/iop/; # 开发联测 19 | # proxy_pass http://10.26.201.133:8090/iop/; # 小飞 20 | # proxy_set_header Host $host:$server_port; 21 | proxy_cookie_path /iop /; 22 | add_header Access-Control-Allow-Origin $allow_origins; # 允许来源 23 | add_header Access-Control-Allow-Credentials "true"; # 允许携带Cookie 24 | add_header Access-Control-Allow-Headers "Content-Type, x-requested-with"; 25 | 26 | if ($request_filename ~* .*.(json|html|htm)$) { 27 | expires -1; 28 | } 29 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 30 | expires 12h; 31 | } 32 | if ($request_filename ~ .*.(js|css)$) { 33 | expires 12h; 34 | } 35 | } 36 | 37 | # pi api 38 | location ^~ /api/ { 39 | # rewrite ^/proxy/(.*)$ /$1 break; 40 | # proxy_pass http://10.26.118.200:8090/; # 卿晨 41 | # proxy_pass http://10.26.201.185:8080/pi/; # 曾文亚 42 | # proxy_pass http://10.26.201.195:8080/pi/; # 小康 43 | # proxy_pass http://10.26.200.42:8383/pi/; # 佳雨 44 | # proxy_pass http://10.26.201.193/pi/; # 联测 45 | proxy_cookie_path /pi /; 46 | add_header Access-Control-Allow-Origin $allow_origins; # 允许来源 47 | add_header Access-Control-Allow-Credentials "true"; # 允许携带Cookie 48 | add_header Access-Control-Allow-Headers "Content-Type, x-requested-with"; 49 | } 50 | 51 | # pi 请求文件时代理 52 | location /pi/ { 53 | # proxy_pass http://10.26.118.200:8090/; # 卿晨 54 | # proxy_pass http://10.26.201.185:8080/pi/; # 曾文亚 55 | # proxy_pass http://10.26.201.195:8080/pi/; # 小康 56 | # proxy_pass http://10.26.200.42:8383/pi/; # 佳雨 57 | proxy_pass http://10.26.201.193/pi/; # 联测 58 | proxy_cookie_path /pi /; 59 | add_header Access-Control-Allow-Origin $allow_origins; # 允许来源 60 | add_header Access-Control-Allow-Credentials "true"; # 允许携带Cookie 61 | add_header Access-Control-Allow-Headers "Content-Type, x-requested-with"; 62 | 63 | if ($request_filename ~* .*.(json|html|htm)$) { 64 | expires -1; 65 | } 66 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 67 | expires 12h; 68 | } 69 | if ($request_filename ~ .*.(js|css)$) { 70 | expires 12h; 71 | } 72 | } 73 | } -------------------------------------------------------------------------------- /6. 优化/demo/nginx-conf/conf/80-dev-server-api.conf: -------------------------------------------------------------------------------- 1 | # 开发时代理服务 2 | server { 3 | listen 80; 4 | server_name 127.0.0.1; 5 | 6 | #字符集 7 | charset utf-8; 8 | 9 | # 统一登录代理 10 | location ^~ /proxy/ { 11 | # rewrite ^/proxy/(.*)$ /$1 break; 12 | # proxy_pass http://127.0.0.1:8010/; # 本机服务 13 | # proxy_pass http://192.168.243.157:80/; # 沈达 14 | # proxy_pass http://192.168.243.159:8080/; # 晓东 15 | # proxy_pass http://10.26.200.42:8090/iop/; # 佳雨 16 | proxy_pass http://10.26.201.186:7070/; # 小康 17 | # proxy_pass http://10.26.200.71:8072/iop/; # 宏泰 18 | # proxy_pass http://10.253.173.207:8090/iop/; # 开发联测 19 | # proxy_pass http://10.26.201.133:8090/iop/; # 小飞 20 | # proxy_set_header Host $host:$server_port; 21 | proxy_cookie_path /iop /; 22 | add_header Access-Control-Allow-Origin $allow_origins; # 允许来源 23 | add_header Access-Control-Allow-Credentials "true"; # 允许携带Cookie 24 | add_header Access-Control-Allow-Headers "Content-Type, x-requested-with"; 25 | 26 | if ($request_filename ~* .*.(json|html|htm)$) { 27 | expires -1; 28 | } 29 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 30 | expires 12h; 31 | } 32 | if ($request_filename ~ .*.(js|css)$) { 33 | expires 12h; 34 | } 35 | } 36 | 37 | # pi api 38 | location ^~ /api/ { 39 | # rewrite ^/proxy/(.*)$ /$1 break; 40 | # proxy_pass http://10.26.118.200:8090/; # 卿晨 41 | # proxy_pass http://10.26.201.185:8080/pi/; # 曾文亚 42 | # proxy_pass http://10.26.201.195:8080/pi/; # 小康 43 | # proxy_pass http://10.26.200.42:8383/pi/; # 佳雨 44 | # proxy_pass http://10.26.201.193/pi/; # 联测 45 | proxy_cookie_path /pi /; 46 | add_header Access-Control-Allow-Origin $allow_origins; # 允许来源 47 | add_header Access-Control-Allow-Credentials "true"; # 允许携带Cookie 48 | add_header Access-Control-Allow-Headers "Content-Type, x-requested-with"; 49 | } 50 | 51 | # pi 请求文件时代理 52 | location /pi/ { 53 | # proxy_pass http://10.26.118.200:8090/; # 卿晨 54 | # proxy_pass http://10.26.201.185:8080/pi/; # 曾文亚 55 | # proxy_pass http://10.26.201.195:8080/pi/; # 小康 56 | # proxy_pass http://10.26.200.42:8383/pi/; # 佳雨 57 | proxy_pass http://10.26.201.193/pi/; # 联测 58 | proxy_cookie_path /pi /; 59 | add_header Access-Control-Allow-Origin $allow_origins; # 允许来源 60 | add_header Access-Control-Allow-Credentials "true"; # 允许携带Cookie 61 | add_header Access-Control-Allow-Headers "Content-Type, x-requested-with"; 62 | 63 | if ($request_filename ~* .*.(json|html|htm)$) { 64 | expires -1; 65 | } 66 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 67 | expires 12h; 68 | } 69 | if ($request_filename ~ .*.(js|css)$) { 70 | expires 12h; 71 | } 72 | } 73 | } -------------------------------------------------------------------------------- /7. 微前端方案/demo/nginx-conf/conf/80-dev-server-api.conf: -------------------------------------------------------------------------------- 1 | # 开发时代理服务 2 | server { 3 | listen 80; 4 | server_name 127.0.0.1; 5 | 6 | #字符集 7 | charset utf-8; 8 | 9 | # 统一登录代理 10 | location ^~ /proxy/ { 11 | # rewrite ^/proxy/(.*)$ /$1 break; 12 | # proxy_pass http://127.0.0.1:8010/; # 本机服务 13 | # proxy_pass http://192.168.243.157:80/; # 沈达 14 | # proxy_pass http://192.168.243.159:8080/; # 晓东 15 | # proxy_pass http://10.26.200.42:8090/iop/; # 佳雨 16 | proxy_pass http://10.26.201.186:7070/; # 小康 17 | # proxy_pass http://10.26.200.71:8072/iop/; # 宏泰 18 | # proxy_pass http://10.253.173.207:8090/iop/; # 开发联测 19 | # proxy_pass http://10.26.201.133:8090/iop/; # 小飞 20 | # proxy_set_header Host $host:$server_port; 21 | proxy_cookie_path /iop /; 22 | add_header Access-Control-Allow-Origin $allow_origins; # 允许来源 23 | add_header Access-Control-Allow-Credentials "true"; # 允许携带Cookie 24 | add_header Access-Control-Allow-Headers "Content-Type, x-requested-with"; 25 | 26 | if ($request_filename ~* .*.(json|html|htm)$) { 27 | expires -1; 28 | } 29 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 30 | expires 12h; 31 | } 32 | if ($request_filename ~ .*.(js|css)$) { 33 | expires 12h; 34 | } 35 | } 36 | 37 | # pi api 38 | location ^~ /api/ { 39 | # rewrite ^/proxy/(.*)$ /$1 break; 40 | # proxy_pass http://10.26.118.200:8090/; # 卿晨 41 | # proxy_pass http://10.26.201.185:8080/pi/; # 曾文亚 42 | # proxy_pass http://10.26.201.195:8080/pi/; # 小康 43 | # proxy_pass http://10.26.200.42:8383/pi/; # 佳雨 44 | # proxy_pass http://10.26.201.193/pi/; # 联测 45 | proxy_cookie_path /pi /; 46 | add_header Access-Control-Allow-Origin $allow_origins; # 允许来源 47 | add_header Access-Control-Allow-Credentials "true"; # 允许携带Cookie 48 | add_header Access-Control-Allow-Headers "Content-Type, x-requested-with"; 49 | } 50 | 51 | # pi 请求文件时代理 52 | location /pi/ { 53 | # proxy_pass http://10.26.118.200:8090/; # 卿晨 54 | # proxy_pass http://10.26.201.185:8080/pi/; # 曾文亚 55 | # proxy_pass http://10.26.201.195:8080/pi/; # 小康 56 | # proxy_pass http://10.26.200.42:8383/pi/; # 佳雨 57 | proxy_pass http://10.26.201.193/pi/; # 联测 58 | proxy_cookie_path /pi /; 59 | add_header Access-Control-Allow-Origin $allow_origins; # 允许来源 60 | add_header Access-Control-Allow-Credentials "true"; # 允许携带Cookie 61 | add_header Access-Control-Allow-Headers "Content-Type, x-requested-with"; 62 | 63 | if ($request_filename ~* .*.(json|html|htm)$) { 64 | expires -1; 65 | } 66 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 67 | expires 12h; 68 | } 69 | if ($request_filename ~ .*.(js|css)$) { 70 | expires 12h; 71 | } 72 | } 73 | } -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/nginx-conf/conf/80-dev-server-api.conf: -------------------------------------------------------------------------------- 1 | # 开发时代理服务 2 | server { 3 | listen 80; 4 | server_name 127.0.0.1; 5 | 6 | #字符集 7 | charset utf-8; 8 | 9 | # 统一登录代理 10 | location ^~ /proxy/ { 11 | # rewrite ^/proxy/(.*)$ /$1 break; 12 | # proxy_pass http://127.0.0.1:8010/; # 本机服务 13 | # proxy_pass http://192.168.243.157:80/; # 沈达 14 | # proxy_pass http://192.168.243.159:8080/; # 晓东 15 | # proxy_pass http://10.26.200.42:8090/iop/; # 佳雨 16 | proxy_pass http://10.26.201.186:7070/; # 小康 17 | # proxy_pass http://10.26.200.71:8072/iop/; # 宏泰 18 | # proxy_pass http://10.253.173.207:8090/iop/; # 开发联测 19 | # proxy_pass http://10.26.201.133:8090/iop/; # 小飞 20 | # proxy_set_header Host $host:$server_port; 21 | proxy_cookie_path /iop /; 22 | add_header Access-Control-Allow-Origin $allow_origins; # 允许来源 23 | add_header Access-Control-Allow-Credentials "true"; # 允许携带Cookie 24 | add_header Access-Control-Allow-Headers "Content-Type, x-requested-with"; 25 | 26 | if ($request_filename ~* .*.(json|html|htm)$) { 27 | expires -1; 28 | } 29 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 30 | expires 12h; 31 | } 32 | if ($request_filename ~ .*.(js|css)$) { 33 | expires 12h; 34 | } 35 | } 36 | 37 | # pi api 38 | location ^~ /api/ { 39 | # rewrite ^/proxy/(.*)$ /$1 break; 40 | # proxy_pass http://10.26.118.200:8090/; # 卿晨 41 | # proxy_pass http://10.26.201.185:8080/pi/; # 曾文亚 42 | # proxy_pass http://10.26.201.195:8080/pi/; # 小康 43 | # proxy_pass http://10.26.200.42:8383/pi/; # 佳雨 44 | # proxy_pass http://10.26.201.193/pi/; # 联测 45 | proxy_cookie_path /pi /; 46 | add_header Access-Control-Allow-Origin $allow_origins; # 允许来源 47 | add_header Access-Control-Allow-Credentials "true"; # 允许携带Cookie 48 | add_header Access-Control-Allow-Headers "Content-Type, x-requested-with"; 49 | } 50 | 51 | # pi 请求文件时代理 52 | location /pi/ { 53 | # proxy_pass http://10.26.118.200:8090/; # 卿晨 54 | # proxy_pass http://10.26.201.185:8080/pi/; # 曾文亚 55 | # proxy_pass http://10.26.201.195:8080/pi/; # 小康 56 | # proxy_pass http://10.26.200.42:8383/pi/; # 佳雨 57 | proxy_pass http://10.26.201.193/pi/; # 联测 58 | proxy_cookie_path /pi /; 59 | add_header Access-Control-Allow-Origin $allow_origins; # 允许来源 60 | add_header Access-Control-Allow-Credentials "true"; # 允许携带Cookie 61 | add_header Access-Control-Allow-Headers "Content-Type, x-requested-with"; 62 | 63 | if ($request_filename ~* .*.(json|html|htm)$) { 64 | expires -1; 65 | } 66 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 67 | expires 12h; 68 | } 69 | if ($request_filename ~ .*.(js|css)$) { 70 | expires 12h; 71 | } 72 | } 73 | } -------------------------------------------------------------------------------- /7. 微前端方案/demo/build/webpack.mod.conf.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const { 3 | CleanWebpackPlugin 4 | } = require('clean-webpack-plugin') 5 | const TerserJSPlugin = require("terser-webpack-plugin") 6 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") 7 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 8 | const config = require('./config') 9 | const { 10 | resolve 11 | } = require('./utils') 12 | 13 | const generateModConfig = mod => { 14 | const webpackConfig = { 15 | mode: 'production', 16 | devtool: config.production.sourceMap ? 17 | 'cheap-module-source-map' : 'none', 18 | entry: resolve(`src/modules/${mod}/index.js`), 19 | output: { 20 | path: resolve(`modules/${mod}`), 21 | publicPath: `/modules/${mod}/`, 22 | filename: `${mod}.js`, 23 | chunkFilename: '[name].[contentHash:5].chunk.js', 24 | library: `_${mod}`, 25 | libraryTarget: 'umd' 26 | }, 27 | resolve: { 28 | alias: { 29 | '@': resolve('src'), 30 | '@mod-a': resolve('src/modules/mod-a'), 31 | '@mod-b': resolve('src/modules/mod-b') 32 | } 33 | }, 34 | optimization: { 35 | minimizer: [ 36 | new TerserJSPlugin({ 37 | parallel: true // 开启多线程压缩 38 | }), 39 | new OptimizeCSSAssetsPlugin({}) 40 | ], 41 | splitChunks: { 42 | chunks: 'all', 43 | minSize: 20000, 44 | maxSize: 0, 45 | minChunks: 1, 46 | maxAsyncRequests: 5, 47 | maxInitialRequests: 3, 48 | automaticNameDelimiter: '/', 49 | name: true, 50 | cacheGroups: { 51 | vendors: { 52 | test: /[\\/]node_modules[\\/]/, 53 | priority: -10 54 | }, 55 | default: { 56 | minChunks: 2, 57 | priority: -20, 58 | reuseExistingChunk: true 59 | } 60 | } 61 | } 62 | }, 63 | plugins: [ 64 | new CleanWebpackPlugin(), 65 | new MiniCssExtractPlugin({ 66 | filename: 'css/[name].[contenthash:5].css', 67 | chunkFilename: 'css/[name].[contenthash:5].css' 68 | }), 69 | new webpack.BannerPlugin({ 70 | banner: `@auther 莫得盐\n@version ${ 71 | require('../package.json').version 72 | }\n@info hash:[hash], chunkhash:[chunkhash], name:[name], filebase:[filebase], query:[query], file:[file]` 73 | }) 74 | ] 75 | } 76 | 77 | if (config.production.bundleAnalyzer) { 78 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') 79 | .BundleAnalyzerPlugin 80 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 81 | } 82 | 83 | return webpackConfig 84 | } 85 | 86 | module.exports = generateModConfig 87 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/modules/mod-a/mod-a.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @auther 莫得盐 3 | * @version 1.0.0 4 | * @info hash:ee3b08193deda7f6b987, chunkhash:21a990cd136cf3798426, name:main, filebase:mod-a.js, query:, file:mod-a.js 5 | */ 6 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["_mod-a"]=t():e["_mod-a"]=t()}(window,function(){return function(e){function t(t){for(var n,r,u=t[0],a=t[1],i=0,f=[];in.e(1).then(n.bind(null,2)),ab:()=>n.e(2).then(n.bind(null,3)),ba:()=>n.e(3).then(n.bind(null,4))};var r={modules:{app:{state:{des:"This is module-A's store-state"}}},getters:{modADes:e=>e.app.des}};n.d(t,"router",function(){return o}),n.d(t,"store",function(){return r})}])}); -------------------------------------------------------------------------------- /7. 微前端方案/demo/modules/mod-b/mod-b.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @auther 莫得盐 3 | * @version 1.0.0 4 | * @info hash:4d68637115e396dc2be8, chunkhash:c8fff1b80efefdb93e88, name:main, filebase:mod-b.js, query:, file:mod-b.js 5 | */ 6 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["_mod-b"]=t():e["_mod-b"]=t()}(window,function(){return function(e){function t(t){for(var n,r,u=t[0],i=t[1],a=0,f=[];an.e(1).then(n.bind(null,2)),ab:()=>n.e(2).then(n.bind(null,3)),ba:()=>n.e(3).then(n.bind(null,4))};var r={modules:{app:{state:{des:"This is module-B's store-state"}}},getters:{modBDes:e=>e.app.des}};n.d(t,"router",function(){return o}),n.d(t,"store",function(){return r})}])}); -------------------------------------------------------------------------------- /6. 优化/demo/nginx-conf/conf/9000-sale-cloud.conf: -------------------------------------------------------------------------------- 1 | server { 2 | listen 9000; #云销售代理地址，IP和端口为application.properties中bompUrl的值 3 | server_name 127.0.0.1; 4 | 5 | #字符集 6 | charset utf-8; 7 | 8 | #设置浏览器缓存 9 | add_header Cache-Control no-cache; 10 | add_header Cache-Control private; 11 | 12 | location / { 13 | root D:/bomp-ui/; #bomp-ui部署路径 14 | index index.html index.htm; 15 | add_header Access-Control-Allow-Origin *; #允许跨域 16 | client_max_body_size 1000m; #文件上传大小限制 17 | 18 | if ($request_filename ~* .*.(html|htm)$) { 19 | expires -1; 20 | } 21 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 22 | expires 30d; 23 | } 24 | if ($request_filename ~ .*.(js|css)$) { 25 | expires -1; 26 | } 27 | } 28 | 29 | location ^~ /bomp/ { 30 | proxy_pass http://127.0.0.1:8080/bomp/; #bomp的IP地址，端口为tomcat配置文件server.xml中的port值 31 | proxy_read_timeout 3600s; #长连接失效时间 32 | client_max_body_size 1000m; #文件上传大小限制 33 | proxy_set_header X-Real-IP $remote_addr; 34 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 35 | proxy_set_header Host $http_host; 36 | proxy_set_header X-NginX-Proxy true; 37 | proxy_http_version 1.1; 38 | proxy_set_header Upgrade $http_upgrade; 39 | proxy_set_header Connection "Upgrade"; 40 | proxy_redirect off; 41 | 42 | if ($request_filename ~* .*.(html|htm)$) { 43 | expires -1; 44 | } 45 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 46 | expires 30d; 47 | } 48 | if ($request_filename ~ .*.(js|css)$) { 49 | expires 12h; 50 | } 51 | 52 | break; 53 | } 54 | 55 | location /bomp/v-system/ { 56 | proxy_pass http://127.0.0.1:9000/v-system/; #bomp-ui中v-system目录 57 | } 58 | 59 | location /getfile/ { 60 | proxy_pass http://10.253.108.65/; #流媒体的IP地址 61 | add_header 'Access‐Control‐Allow‐Origin' '*'; 62 | add_header 'Access‐Control‐Allow‐Credentials' 'true'; 63 | add_header 'Access‐Control‐Allow‐Methods' '*'; 64 | } 65 | 66 | #error_page 404 /404.html; 67 | 68 | # redirect server error pages to the static page /50x.html 69 | # 70 | error_page 500 502 503 504 /50x.html; 71 | location = /50x.html { 72 | root html; 73 | } 74 | 75 | # proxy the PHP scripts to Apache listening on 127.0.0.1:80 76 | # 77 | #location ~ \.php$ { 78 | # proxy_pass http://127.0.0.1; 79 | #} 80 | 81 | # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 82 | # 83 | #location ~ \.php$ { 84 | # root html; 85 | # fastcgi_pass 127.0.0.1:9000; 86 | # fastcgi_index index.php; 87 | # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; 88 | # include fastcgi_params; 89 | #} 90 | 91 | # deny access to .htaccess files, if Apache's document root 92 | # concurs with nginx's one 93 | # 94 | #location ~ /\.ht { 95 | # deny all; 96 | #} 97 | } -------------------------------------------------------------------------------- /5. 开发服务/demo/nginx-conf/conf/9000-sale-cloud.conf: -------------------------------------------------------------------------------- 1 | server { 2 | listen 9000; #云销售代理地址，IP和端口为application.properties中bompUrl的值 3 | server_name 127.0.0.1; 4 | 5 | #字符集 6 | charset utf-8; 7 | 8 | #设置浏览器缓存 9 | add_header Cache-Control no-cache; 10 | add_header Cache-Control private; 11 | 12 | location / { 13 | root D:/bomp-ui/; #bomp-ui部署路径 14 | index index.html index.htm; 15 | add_header Access-Control-Allow-Origin *; #允许跨域 16 | client_max_body_size 1000m; #文件上传大小限制 17 | 18 | if ($request_filename ~* .*.(html|htm)$) { 19 | expires -1; 20 | } 21 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 22 | expires 30d; 23 | } 24 | if ($request_filename ~ .*.(js|css)$) { 25 | expires -1; 26 | } 27 | } 28 | 29 | location ^~ /bomp/ { 30 | proxy_pass http://127.0.0.1:8080/bomp/; #bomp的IP地址，端口为tomcat配置文件server.xml中的port值 31 | proxy_read_timeout 3600s; #长连接失效时间 32 | client_max_body_size 1000m; #文件上传大小限制 33 | proxy_set_header X-Real-IP $remote_addr; 34 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 35 | proxy_set_header Host $http_host; 36 | proxy_set_header X-NginX-Proxy true; 37 | proxy_http_version 1.1; 38 | proxy_set_header Upgrade $http_upgrade; 39 | proxy_set_header Connection "Upgrade"; 40 | proxy_redirect off; 41 | 42 | if ($request_filename ~* .*.(html|htm)$) { 43 | expires -1; 44 | } 45 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 46 | expires 30d; 47 | } 48 | if ($request_filename ~ .*.(js|css)$) { 49 | expires 12h; 50 | } 51 | 52 | break; 53 | } 54 | 55 | location /bomp/v-system/ { 56 | proxy_pass http://127.0.0.1:9000/v-system/; #bomp-ui中v-system目录 57 | } 58 | 59 | location /getfile/ { 60 | proxy_pass http://10.253.108.65/; #流媒体的IP地址 61 | add_header 'Access‐Control‐Allow‐Origin' '*'; 62 | add_header 'Access‐Control‐Allow‐Credentials' 'true'; 63 | add_header 'Access‐Control‐Allow‐Methods' '*'; 64 | } 65 | 66 | #error_page 404 /404.html; 67 | 68 | # redirect server error pages to the static page /50x.html 69 | # 70 | error_page 500 502 503 504 /50x.html; 71 | location = /50x.html { 72 | root html; 73 | } 74 | 75 | # proxy the PHP scripts to Apache listening on 127.0.0.1:80 76 | # 77 | #location ~ \.php$ { 78 | # proxy_pass http://127.0.0.1; 79 | #} 80 | 81 | # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 82 | # 83 | #location ~ \.php$ { 84 | # root html; 85 | # fastcgi_pass 127.0.0.1:9000; 86 | # fastcgi_index index.php; 87 | # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; 88 | # include fastcgi_params; 89 | #} 90 | 91 | # deny access to .htaccess files, if Apache's document root 92 | # concurs with nginx's one 93 | # 94 | #location ~ /\.ht { 95 | # deny all; 96 | #} 97 | } -------------------------------------------------------------------------------- /7. 微前端方案/demo/nginx-conf/conf/9000-sale-cloud.conf: -------------------------------------------------------------------------------- 1 | server { 2 | listen 9000; #云销售代理地址，IP和端口为application.properties中bompUrl的值 3 | server_name 127.0.0.1; 4 | 5 | #字符集 6 | charset utf-8; 7 | 8 | #设置浏览器缓存 9 | add_header Cache-Control no-cache; 10 | add_header Cache-Control private; 11 | 12 | location / { 13 | root D:/bomp-ui/; #bomp-ui部署路径 14 | index index.html index.htm; 15 | add_header Access-Control-Allow-Origin *; #允许跨域 16 | client_max_body_size 1000m; #文件上传大小限制 17 | 18 | if ($request_filename ~* .*.(html|htm)$) { 19 | expires -1; 20 | } 21 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 22 | expires 30d; 23 | } 24 | if ($request_filename ~ .*.(js|css)$) { 25 | expires -1; 26 | } 27 | } 28 | 29 | location ^~ /bomp/ { 30 | proxy_pass http://127.0.0.1:8080/bomp/; #bomp的IP地址，端口为tomcat配置文件server.xml中的port值 31 | proxy_read_timeout 3600s; #长连接失效时间 32 | client_max_body_size 1000m; #文件上传大小限制 33 | proxy_set_header X-Real-IP $remote_addr; 34 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 35 | proxy_set_header Host $http_host; 36 | proxy_set_header X-NginX-Proxy true; 37 | proxy_http_version 1.1; 38 | proxy_set_header Upgrade $http_upgrade; 39 | proxy_set_header Connection "Upgrade"; 40 | proxy_redirect off; 41 | 42 | if ($request_filename ~* .*.(html|htm)$) { 43 | expires -1; 44 | } 45 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 46 | expires 30d; 47 | } 48 | if ($request_filename ~ .*.(js|css)$) { 49 | expires 12h; 50 | } 51 | 52 | break; 53 | } 54 | 55 | location /bomp/v-system/ { 56 | proxy_pass http://127.0.0.1:9000/v-system/; #bomp-ui中v-system目录 57 | } 58 | 59 | location /getfile/ { 60 | proxy_pass http://10.253.108.65/; #流媒体的IP地址 61 | add_header 'Access‐Control‐Allow‐Origin' '*'; 62 | add_header 'Access‐Control‐Allow‐Credentials' 'true'; 63 | add_header 'Access‐Control‐Allow‐Methods' '*'; 64 | } 65 | 66 | #error_page 404 /404.html; 67 | 68 | # redirect server error pages to the static page /50x.html 69 | # 70 | error_page 500 502 503 504 /50x.html; 71 | location = /50x.html { 72 | root html; 73 | } 74 | 75 | # proxy the PHP scripts to Apache listening on 127.0.0.1:80 76 | # 77 | #location ~ \.php$ { 78 | # proxy_pass http://127.0.0.1; 79 | #} 80 | 81 | # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 82 | # 83 | #location ~ \.php$ { 84 | # root html; 85 | # fastcgi_pass 127.0.0.1:9000; 86 | # fastcgi_index index.php; 87 | # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; 88 | # include fastcgi_params; 89 | #} 90 | 91 | # deny access to .htaccess files, if Apache's document root 92 | # concurs with nginx's one 93 | # 94 | #location ~ /\.ht { 95 | # deny all; 96 | #} 97 | } -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/nginx-conf/conf/9000-sale-cloud.conf: -------------------------------------------------------------------------------- 1 | server { 2 | listen 9000; #云销售代理地址，IP和端口为application.properties中bompUrl的值 3 | server_name 127.0.0.1; 4 | 5 | #字符集 6 | charset utf-8; 7 | 8 | #设置浏览器缓存 9 | add_header Cache-Control no-cache; 10 | add_header Cache-Control private; 11 | 12 | location / { 13 | root D:/bomp-ui/; #bomp-ui部署路径 14 | index index.html index.htm; 15 | add_header Access-Control-Allow-Origin *; #允许跨域 16 | client_max_body_size 1000m; #文件上传大小限制 17 | 18 | if ($request_filename ~* .*.(html|htm)$) { 19 | expires -1; 20 | } 21 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 22 | expires 30d; 23 | } 24 | if ($request_filename ~ .*.(js|css)$) { 25 | expires -1; 26 | } 27 | } 28 | 29 | location ^~ /bomp/ { 30 | proxy_pass http://127.0.0.1:8080/bomp/; #bomp的IP地址，端口为tomcat配置文件server.xml中的port值 31 | proxy_read_timeout 3600s; #长连接失效时间 32 | client_max_body_size 1000m; #文件上传大小限制 33 | proxy_set_header X-Real-IP $remote_addr; 34 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 35 | proxy_set_header Host $http_host; 36 | proxy_set_header X-NginX-Proxy true; 37 | proxy_http_version 1.1; 38 | proxy_set_header Upgrade $http_upgrade; 39 | proxy_set_header Connection "Upgrade"; 40 | proxy_redirect off; 41 | 42 | if ($request_filename ~* .*.(html|htm)$) { 43 | expires -1; 44 | } 45 | if ($request_filename ~* .*.(gif|jpg|jpeg|png|bmp|swf)$) { 46 | expires 30d; 47 | } 48 | if ($request_filename ~ .*.(js|css)$) { 49 | expires 12h; 50 | } 51 | 52 | break; 53 | } 54 | 55 | location /bomp/v-system/ { 56 | proxy_pass http://127.0.0.1:9000/v-system/; #bomp-ui中v-system目录 57 | } 58 | 59 | location /getfile/ { 60 | proxy_pass http://10.253.108.65/; #流媒体的IP地址 61 | add_header 'Access‐Control‐Allow‐Origin' '*'; 62 | add_header 'Access‐Control‐Allow‐Credentials' 'true'; 63 | add_header 'Access‐Control‐Allow‐Methods' '*'; 64 | } 65 | 66 | #error_page 404 /404.html; 67 | 68 | # redirect server error pages to the static page /50x.html 69 | # 70 | error_page 500 502 503 504 /50x.html; 71 | location = /50x.html { 72 | root html; 73 | } 74 | 75 | # proxy the PHP scripts to Apache listening on 127.0.0.1:80 76 | # 77 | #location ~ \.php$ { 78 | # proxy_pass http://127.0.0.1; 79 | #} 80 | 81 | # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 82 | # 83 | #location ~ \.php$ { 84 | # root html; 85 | # fastcgi_pass 127.0.0.1:9000; 86 | # fastcgi_index index.php; 87 | # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; 88 | # include fastcgi_params; 89 | #} 90 | 91 | # deny access to .htaccess files, if Apache's document root 92 | # concurs with nginx's one 93 | # 94 | #location ~ /\.ht { 95 | # deny all; 96 | #} 97 | } -------------------------------------------------------------------------------- /4. 处理 vue 文件/demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 5 | 6 | module.exports = { 7 | mode: 'development', 8 | entry: './src/main.js', 9 | output: { 10 | filename: 'dist.js', 11 | path: path.resolve(__dirname, './dist') 12 | }, 13 | resolve: { 14 | extensions: ['.vue', '.js'], 15 | alias: { 16 | '@': path.resolve(__dirname, './src') 17 | }, 18 | modules: [path.resolve(__dirname, './node_modules')] 19 | }, 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.vue$/, 24 | loader: 'vue-loader', 25 | options: { 26 | // 在开发环境下，不使用 prettier 格式化编译后的模板渲染代码 27 | // 更多设置： https://vue-loader.vuejs.org/zh/options.html#cachedirectory-cacheidentifier 28 | prettify: false 29 | } 30 | }, 31 | { 32 | test: /\.(png|jpe?g|gif|webp)$/, 33 | use: [ 34 | { 35 | loader: 'url-loader', 36 | options: { 37 | // 文件命名 38 | name: '[name].[ext]', 39 | // 输出路径 40 | outputPath: 'imgs/', 41 | // 小于 10k 的图片转成 base64 编码 42 | limit: 10240 43 | } 44 | } 45 | ] 46 | }, 47 | { 48 | test: /\.styl(us)?$/, 49 | use: [ 50 | { 51 | loader: MiniCssExtractPlugin.loader, 52 | options: { 53 | publicPath: '../', 54 | hmr: process.env.NODE_ENV === 'development', 55 | reloadAll: true 56 | } 57 | }, 58 | { 59 | loader: 'css-loader', 60 | options: { 61 | importLoaders: 2 // 在 css-loader 前执行的 loader 数量 62 | } 63 | }, 64 | 'postcss-loader', 65 | { 66 | loader: 'stylus-loader', 67 | options: { 68 | preferPathResolver: 'webpack' // 优先使用 webpack 用于路径解析，找不到再使用 stylus-loader 的路径解析 69 | } 70 | } 71 | ] 72 | }, 73 | { 74 | test: /\.css$/, 75 | use: [ 76 | 'style-loader', 77 | 'css-loader' 78 | ] 79 | }, 80 | { 81 | test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/i, 82 | use: { 83 | loader: 'file-loader', 84 | options: { 85 | name: '[name].[ext]', 86 | outputPath: 'fonts/' 87 | } 88 | } 89 | } 90 | ], 91 | }, 92 | plugins: [ 93 | new VueLoaderPlugin(), 94 | new HtmlWebpackPlugin({ 95 | template: path.resolve(__dirname, 'index.html') 96 | }), 97 | new MiniCssExtractPlugin({ 98 | filename: 'css/[name].css', 99 | chunkFilename: 'css/[name].css' 100 | }) 101 | ] 102 | } 103 | -------------------------------------------------------------------------------- /6. 优化/demo/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | const { 2 | CleanWebpackPlugin 3 | } = require('clean-webpack-plugin') 4 | const TerserJSPlugin = require("terser-webpack-plugin") 5 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") 6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 7 | const CopyWebpackPlugin = require('copy-webpack-plugin') 8 | const config = require('./config') 9 | // const { 10 | // resolve 11 | // } = require('./utils') 12 | 13 | const webpackConfig = { 14 | // mode: 'development', 15 | mode: 'production', 16 | devtool: config.production.sourceMap ? 17 | 'cheap-module-source-map' : 'none', 18 | output: { 19 | filename: '[name].[contentHash:5].js', 20 | chunkFilename: '[name].[contentHash:5].chunk.js' 21 | }, 22 | optimization: { 23 | minimizer: [ 24 | new TerserJSPlugin({ 25 | parallel: true // 开启多线程压缩 26 | }), 27 | new OptimizeCSSAssetsPlugin({}) 28 | ], 29 | splitChunks: { 30 | chunks: 'all', 31 | minSize: 20000, // 正常设置 20000+ 即 20k+ ，但这里我们的公共文件只有几行代码，所以设置为 1 32 | maxSize: 0, 33 | minChunks: 1, 34 | maxAsyncRequests: 5, 35 | maxInitialRequests: 3, 36 | automaticNameDelimiter: '/', 37 | // name(mod, chunks) { 38 | // if (chunks[0].name === 'app') return 'dependencies/app.vendor' 39 | // return chunks[0].name 40 | 41 | // // if (/src/.test(mod.request)) { 42 | // // let requestName = mod.request.replace(/.*\\src\\/, '').replace(/"/g, '') 43 | // // if (requestName) return requestName 44 | // // } else if (/node_modules/.test(mod.request)) { 45 | // // return 'dependencies/' + mod.request.match(/node_modules.[\w-]+/)[0].replace(/node_modules./, '') 46 | // // } 47 | // // return null 48 | // }, 49 | name: false, 50 | cacheGroups: { 51 | vendors: { 52 | test: /[\\/]node_modules[\\/]/, 53 | priority: -10 54 | }, 55 | default: { 56 | minChunks: 2, 57 | priority: -20, 58 | reuseExistingChunk: true 59 | } 60 | } 61 | } 62 | }, 63 | externals: { 64 | lodash: { 65 | commonjs: 'lodash', 66 | umd: 'lodash', 67 | root: '_' // 默认执行环境已经存在全局变量： _ ，浏览器中就是 window._ 68 | } 69 | }, 70 | plugins: [ 71 | new CleanWebpackPlugin(), 72 | new CopyWebpackPlugin([ 73 | { 74 | from: 'static/', 75 | to: 'static/' 76 | } 77 | ]), 78 | new MiniCssExtractPlugin({ 79 | filename: 'css/[name].[contenthash:5].css', 80 | chunkFilename: 'css/[name].[contenthash:5].css' 81 | }) 82 | ] 83 | } 84 | 85 | if (config.production.bundleAnalyzer) { 86 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') 87 | .BundleAnalyzerPlugin 88 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 89 | } 90 | 91 | module.exports = webpackConfig 92 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | const { 2 | CleanWebpackPlugin 3 | } = require('clean-webpack-plugin') 4 | const TerserJSPlugin = require("terser-webpack-plugin") 5 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") 6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 7 | const CopyWebpackPlugin = require('copy-webpack-plugin') 8 | const config = require('./config') 9 | // const { 10 | // resolve 11 | // } = require('./utils') 12 | 13 | const webpackConfig = { 14 | // mode: 'development', 15 | mode: 'production', 16 | devtool: config.production.sourceMap ? 17 | 'cheap-module-source-map' : 'none', 18 | output: { 19 | filename: '[name].[contentHash:5].js', 20 | chunkFilename: '[name].[contentHash:5].chunk.js' 21 | }, 22 | optimization: { 23 | minimizer: [ 24 | new TerserJSPlugin({ 25 | parallel: true // 开启多线程压缩 26 | }), 27 | new OptimizeCSSAssetsPlugin({}) 28 | ], 29 | splitChunks: { 30 | chunks: 'all', 31 | minSize: 20000, // 正常设置 20000+ 即 20k+ ，但这里我们的公共文件只有几行代码，所以设置为 1 32 | maxSize: 0, 33 | minChunks: 1, 34 | maxAsyncRequests: 5, 35 | maxInitialRequests: 3, 36 | automaticNameDelimiter: '/', 37 | // name(mod, chunks) { 38 | // if (chunks[0].name === 'app') return 'dependencies/app.vendor' 39 | // return chunks[0].name 40 | 41 | // // if (/src/.test(mod.request)) { 42 | // // let requestName = mod.request.replace(/.*\\src\\/, '').replace(/"/g, '') 43 | // // if (requestName) return requestName 44 | // // } else if (/node_modules/.test(mod.request)) { 45 | // // return 'dependencies/' + mod.request.match(/node_modules.[\w-]+/)[0].replace(/node_modules./, '') 46 | // // } 47 | // // return null 48 | // }, 49 | name: false, 50 | cacheGroups: { 51 | vendors: { 52 | test: /[\\/]node_modules[\\/]/, 53 | priority: -10 54 | }, 55 | default: { 56 | minChunks: 2, 57 | priority: -20, 58 | reuseExistingChunk: true 59 | } 60 | } 61 | } 62 | }, 63 | externals: { 64 | lodash: { 65 | commonjs: 'lodash', 66 | umd: 'lodash', 67 | root: '_' // 默认执行环境已经存在全局变量： _ ，浏览器中就是 window._ 68 | } 69 | }, 70 | plugins: [ 71 | new CleanWebpackPlugin(), 72 | new CopyWebpackPlugin([{ 73 | from: 'static/', 74 | to: 'static/' 75 | }, 76 | { 77 | from: 'modules/', 78 | to: 'modules/' 79 | } 80 | ]), 81 | new MiniCssExtractPlugin({ 82 | filename: 'css/[name].[contenthash:5].css', 83 | chunkFilename: 'css/[name].[contenthash:5].css' 84 | }) 85 | ] 86 | } 87 | 88 | if (config.production.bundleAnalyzer) { 89 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') 90 | .BundleAnalyzerPlugin 91 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 92 | } 93 | 94 | module.exports = webpackConfig 95 | -------------------------------------------------------------------------------- /5. 开发服务/demo/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 5 | const { 6 | resolve 7 | } = require('./utils') 8 | 9 | module.exports = { 10 | entry: { 11 | app: ['./src/main.js'] 12 | }, 13 | output: { 14 | publicPath: '/', 15 | filename: '[name].[hash:5].js', 16 | chunkFilename: '[name].[hash:5].chunk.js', 17 | path: resolve('dist') 18 | }, 19 | resolve: { 20 | extensions: ['.vue', '.js'], 21 | alias: { 22 | '@': resolve('./src') 23 | }, 24 | modules: [resolve('./node_modules')] 25 | }, 26 | performance: false, 27 | module: { 28 | rules: [{ 29 | test: /\.vue$/, 30 | loader: 'vue-loader', 31 | options: { 32 | // 在开发环境下，不使用 prettier 格式化编译后的模板渲染代码 33 | // 更多设置： https://vue-loader.vuejs.org/zh/options.html#cachedirectory-cacheidentifier 34 | prettify: false 35 | } 36 | }, 37 | { 38 | test: /\.(png|jpe?g|gif|webp)$/, 39 | use: [{ 40 | loader: 'url-loader', 41 | options: { 42 | // 文件命名 43 | name: '[name].[ext]', 44 | // 输出路径 45 | outputPath: 'imgs/', 46 | // 小于 10k 的图片转成 base64 编码 47 | limit: 10240 48 | } 49 | }] 50 | }, 51 | { 52 | test: /\.styl(us)?$/, 53 | use: [{ 54 | loader: MiniCssExtractPlugin.loader, 55 | options: { 56 | publicPath: '../', 57 | hmr: process.env.NODE_ENV === 'development', 58 | reloadAll: true 59 | } 60 | }, 61 | { 62 | loader: 'css-loader', 63 | options: { 64 | importLoaders: 2 // 在 css-loader 前执行的 loader 数量 65 | } 66 | }, 67 | 'postcss-loader', 68 | { 69 | loader: 'stylus-loader', 70 | options: { 71 | preferPathResolver: 'webpack' // 优先使用 webpack 用于路径解析，找不到再使用 stylus-loader 的路径解析 72 | } 73 | } 74 | ] 75 | }, 76 | { 77 | test: /\.css$/, 78 | use: [ 79 | 'style-loader', 80 | 'css-loader' 81 | ] 82 | }, 83 | { 84 | test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/i, 85 | use: { 86 | loader: 'file-loader', 87 | options: { 88 | name: '[name].[ext]', 89 | outputPath: 'fonts/' 90 | } 91 | } 92 | } 93 | ], 94 | }, 95 | plugins: [ 96 | new VueLoaderPlugin(), 97 | new HtmlWebpackPlugin({ 98 | template: resolve('index.html') 99 | }), 100 | new MiniCssExtractPlugin({ 101 | filename: 'css/[name].[contenthash:5].css', 102 | chunkFilename: 'css/[name].[contenthash:5].css' 103 | }), 104 | ] 105 | } 106 | -------------------------------------------------------------------------------- /6. 优化/demo/nginx-conf/koi-utf: -------------------------------------------------------------------------------- 1 | 2 | # This map is not a full koi8-r <> utf8 map: it does not contain 3 | # box-drawing and some other characters. Besides this map contains 4 | # several koi8-u and Byelorussian letters which are not in koi8-r. 5 | # If you need a full and standard map, use contrib/unicode2nginx/koi-utf 6 | # map instead. 7 | 8 | charset_map koi8-r utf-8 { 9 | 10 | 80 E282AC ; # euro 11 | 12 | 95 E280A2 ; # bullet 13 | 14 | 9A C2A0 ; #   15 | 16 | 9E C2B7 ; # · 17 | 18 | A3 D191 ; # small yo 19 | A4 D194 ; # small Ukrainian ye 20 | 21 | A6 D196 ; # small Ukrainian i 22 | A7 D197 ; # small Ukrainian yi 23 | 24 | AD D291 ; # small Ukrainian soft g 25 | AE D19E ; # small Byelorussian short u 26 | 27 | B0 C2B0 ; # ° 28 | 29 | B3 D081 ; # capital YO 30 | B4 D084 ; # capital Ukrainian YE 31 | 32 | B6 D086 ; # capital Ukrainian I 33 | B7 D087 ; # capital Ukrainian YI 34 | 35 | B9 E28496 ; # numero sign 36 | 37 | BD D290 ; # capital Ukrainian soft G 38 | BE D18E ; # capital Byelorussian short U 39 | 40 | BF C2A9 ; # (C) 41 | 42 | C0 D18E ; # small yu 43 | C1 D0B0 ; # small a 44 | C2 D0B1 ; # small b 45 | C3 D186 ; # small ts 46 | C4 D0B4 ; # small d 47 | C5 D0B5 ; # small ye 48 | C6 D184 ; # small f 49 | C7 D0B3 ; # small g 50 | C8 D185 ; # small kh 51 | C9 D0B8 ; # small i 52 | CA D0B9 ; # small j 53 | CB D0BA ; # small k 54 | CC D0BB ; # small l 55 | CD D0BC ; # small m 56 | CE D0BD ; # small n 57 | CF D0BE ; # small o 58 | 59 | D0 D0BF ; # small p 60 | D1 D18F ; # small ya 61 | D2 D180 ; # small r 62 | D3 D181 ; # small s 63 | D4 D182 ; # small t 64 | D5 D183 ; # small u 65 | D6 D0B6 ; # small zh 66 | D7 D0B2 ; # small v 67 | D8 D18C ; # small soft sign 68 | D9 D18B ; # small y 69 | DA D0B7 ; # small z 70 | DB D188 ; # small sh 71 | DC D18D ; # small e 72 | DD D189 ; # small shch 73 | DE D187 ; # small ch 74 | DF D18A ; # small hard sign 75 | 76 | E0 D0AE ; # capital YU 77 | E1 D090 ; # capital A 78 | E2 D091 ; # capital B 79 | E3 D0A6 ; # capital TS 80 | E4 D094 ; # capital D 81 | E5 D095 ; # capital YE 82 | E6 D0A4 ; # capital F 83 | E7 D093 ; # capital G 84 | E8 D0A5 ; # capital KH 85 | E9 D098 ; # capital I 86 | EA D099 ; # capital J 87 | EB D09A ; # capital K 88 | EC D09B ; # capital L 89 | ED D09C ; # capital M 90 | EE D09D ; # capital N 91 | EF D09E ; # capital O 92 | 93 | F0 D09F ; # capital P 94 | F1 D0AF ; # capital YA 95 | F2 D0A0 ; # capital R 96 | F3 D0A1 ; # capital S 97 | F4 D0A2 ; # capital T 98 | F5 D0A3 ; # capital U 99 | F6 D096 ; # capital ZH 100 | F7 D092 ; # capital V 101 | F8 D0AC ; # capital soft sign 102 | F9 D0AB ; # capital Y 103 | FA D097 ; # capital Z 104 | FB D0A8 ; # capital SH 105 | FC D0AD ; # capital E 106 | FD D0A9 ; # capital SHCH 107 | FE D0A7 ; # capital CH 108 | FF D0AA ; # capital hard sign 109 | } 110 | -------------------------------------------------------------------------------- /5. 开发服务/demo/nginx-conf/koi-utf: -------------------------------------------------------------------------------- 1 | 2 | # This map is not a full koi8-r <> utf8 map: it does not contain 3 | # box-drawing and some other characters. Besides this map contains 4 | # several koi8-u and Byelorussian letters which are not in koi8-r. 5 | # If you need a full and standard map, use contrib/unicode2nginx/koi-utf 6 | # map instead. 7 | 8 | charset_map koi8-r utf-8 { 9 | 10 | 80 E282AC ; # euro 11 | 12 | 95 E280A2 ; # bullet 13 | 14 | 9A C2A0 ; #   15 | 16 | 9E C2B7 ; # · 17 | 18 | A3 D191 ; # small yo 19 | A4 D194 ; # small Ukrainian ye 20 | 21 | A6 D196 ; # small Ukrainian i 22 | A7 D197 ; # small Ukrainian yi 23 | 24 | AD D291 ; # small Ukrainian soft g 25 | AE D19E ; # small Byelorussian short u 26 | 27 | B0 C2B0 ; # ° 28 | 29 | B3 D081 ; # capital YO 30 | B4 D084 ; # capital Ukrainian YE 31 | 32 | B6 D086 ; # capital Ukrainian I 33 | B7 D087 ; # capital Ukrainian YI 34 | 35 | B9 E28496 ; # numero sign 36 | 37 | BD D290 ; # capital Ukrainian soft G 38 | BE D18E ; # capital Byelorussian short U 39 | 40 | BF C2A9 ; # (C) 41 | 42 | C0 D18E ; # small yu 43 | C1 D0B0 ; # small a 44 | C2 D0B1 ; # small b 45 | C3 D186 ; # small ts 46 | C4 D0B4 ; # small d 47 | C5 D0B5 ; # small ye 48 | C6 D184 ; # small f 49 | C7 D0B3 ; # small g 50 | C8 D185 ; # small kh 51 | C9 D0B8 ; # small i 52 | CA D0B9 ; # small j 53 | CB D0BA ; # small k 54 | CC D0BB ; # small l 55 | CD D0BC ; # small m 56 | CE D0BD ; # small n 57 | CF D0BE ; # small o 58 | 59 | D0 D0BF ; # small p 60 | D1 D18F ; # small ya 61 | D2 D180 ; # small r 62 | D3 D181 ; # small s 63 | D4 D182 ; # small t 64 | D5 D183 ; # small u 65 | D6 D0B6 ; # small zh 66 | D7 D0B2 ; # small v 67 | D8 D18C ; # small soft sign 68 | D9 D18B ; # small y 69 | DA D0B7 ; # small z 70 | DB D188 ; # small sh 71 | DC D18D ; # small e 72 | DD D189 ; # small shch 73 | DE D187 ; # small ch 74 | DF D18A ; # small hard sign 75 | 76 | E0 D0AE ; # capital YU 77 | E1 D090 ; # capital A 78 | E2 D091 ; # capital B 79 | E3 D0A6 ; # capital TS 80 | E4 D094 ; # capital D 81 | E5 D095 ; # capital YE 82 | E6 D0A4 ; # capital F 83 | E7 D093 ; # capital G 84 | E8 D0A5 ; # capital KH 85 | E9 D098 ; # capital I 86 | EA D099 ; # capital J 87 | EB D09A ; # capital K 88 | EC D09B ; # capital L 89 | ED D09C ; # capital M 90 | EE D09D ; # capital N 91 | EF D09E ; # capital O 92 | 93 | F0 D09F ; # capital P 94 | F1 D0AF ; # capital YA 95 | F2 D0A0 ; # capital R 96 | F3 D0A1 ; # capital S 97 | F4 D0A2 ; # capital T 98 | F5 D0A3 ; # capital U 99 | F6 D096 ; # capital ZH 100 | F7 D092 ; # capital V 101 | F8 D0AC ; # capital soft sign 102 | F9 D0AB ; # capital Y 103 | FA D097 ; # capital Z 104 | FB D0A8 ; # capital SH 105 | FC D0AD ; # capital E 106 | FD D0A9 ; # capital SHCH 107 | FE D0A7 ; # capital CH 108 | FF D0AA ; # capital hard sign 109 | } 110 | -------------------------------------------------------------------------------- /7. 微前端方案/demo/nginx-conf/koi-utf: -------------------------------------------------------------------------------- 1 | 2 | # This map is not a full koi8-r <> utf8 map: it does not contain 3 | # box-drawing and some other characters. Besides this map contains 4 | # several koi8-u and Byelorussian letters which are not in koi8-r. 5 | # If you need a full and standard map, use contrib/unicode2nginx/koi-utf 6 | # map instead. 7 | 8 | charset_map koi8-r utf-8 { 9 | 10 | 80 E282AC ; # euro 11 | 12 | 95 E280A2 ; # bullet 13 | 14 | 9A C2A0 ; #   15 | 16 | 9E C2B7 ; # · 17 | 18 | A3 D191 ; # small yo 19 | A4 D194 ; # small Ukrainian ye 20 | 21 | A6 D196 ; # small Ukrainian i 22 | A7 D197 ; # small Ukrainian yi 23 | 24 | AD D291 ; # small Ukrainian soft g 25 | AE D19E ; # small Byelorussian short u 26 | 27 | B0 C2B0 ; # ° 28 | 29 | B3 D081 ; # capital YO 30 | B4 D084 ; # capital Ukrainian YE 31 | 32 | B6 D086 ; # capital Ukrainian I 33 | B7 D087 ; # capital Ukrainian YI 34 | 35 | B9 E28496 ; # numero sign 36 | 37 | BD D290 ; # capital Ukrainian soft G 38 | BE D18E ; # capital Byelorussian short U 39 | 40 | BF C2A9 ; # (C) 41 | 42 | C0 D18E ; # small yu 43 | C1 D0B0 ; # small a 44 | C2 D0B1 ; # small b 45 | C3 D186 ; # small ts 46 | C4 D0B4 ; # small d 47 | C5 D0B5 ; # small ye 48 | C6 D184 ; # small f 49 | C7 D0B3 ; # small g 50 | C8 D185 ; # small kh 51 | C9 D0B8 ; # small i 52 | CA D0B9 ; # small j 53 | CB D0BA ; # small k 54 | CC D0BB ; # small l 55 | CD D0BC ; # small m 56 | CE D0BD ; # small n 57 | CF D0BE ; # small o 58 | 59 | D0 D0BF ; # small p 60 | D1 D18F ; # small ya 61 | D2 D180 ; # small r 62 | D3 D181 ; # small s 63 | D4 D182 ; # small t 64 | D5 D183 ; # small u 65 | D6 D0B6 ; # small zh 66 | D7 D0B2 ; # small v 67 | D8 D18C ; # small soft sign 68 | D9 D18B ; # small y 69 | DA D0B7 ; # small z 70 | DB D188 ; # small sh 71 | DC D18D ; # small e 72 | DD D189 ; # small shch 73 | DE D187 ; # small ch 74 | DF D18A ; # small hard sign 75 | 76 | E0 D0AE ; # capital YU 77 | E1 D090 ; # capital A 78 | E2 D091 ; # capital B 79 | E3 D0A6 ; # capital TS 80 | E4 D094 ; # capital D 81 | E5 D095 ; # capital YE 82 | E6 D0A4 ; # capital F 83 | E7 D093 ; # capital G 84 | E8 D0A5 ; # capital KH 85 | E9 D098 ; # capital I 86 | EA D099 ; # capital J 87 | EB D09A ; # capital K 88 | EC D09B ; # capital L 89 | ED D09C ; # capital M 90 | EE D09D ; # capital N 91 | EF D09E ; # capital O 92 | 93 | F0 D09F ; # capital P 94 | F1 D0AF ; # capital YA 95 | F2 D0A0 ; # capital R 96 | F3 D0A1 ; # capital S 97 | F4 D0A2 ; # capital T 98 | F5 D0A3 ; # capital U 99 | F6 D096 ; # capital ZH 100 | F7 D092 ; # capital V 101 | F8 D0AC ; # capital soft sign 102 | F9 D0AB ; # capital Y 103 | FA D097 ; # capital Z 104 | FB D0A8 ; # capital SH 105 | FC D0AD ; # capital E 106 | FD D0A9 ; # capital SHCH 107 | FE D0A7 ; # capital CH 108 | FF D0AA ; # capital hard sign 109 | } 110 | --------------------------------------------------------------------------------