wordpress模版使用,班级优化大师下载,网站运行环境建设方案,WordPress登录效果默认方案
umi2 默认对新手友好#xff0c;所以默认不做按需加载处理#xff0c;umi build 后输出 index.html、umi.js 和 umi.css 三个文件。
不输出 html 文件
某些场景 html 文件交给后端输出#xff0c;前端构建并不需要输出 html 文件#xff0c;可配置环境变量 HTM…默认方案
umi2 默认对新手友好所以默认不做按需加载处理umi build 后输出 index.html、umi.js 和 umi.css 三个文件。
不输出 html 文件
某些场景 html 文件交给后端输出前端构建并不需要输出 html 文件可配置环境变量 HTMLnone 实现。
$ HTMLnone umi build部署 html 到非根目录
经常有同学问这个问题 为什么我本地开发是好的部署后就没反应了而且没有报错 没有报错 这是应用部署在非根路径的典型现象。为啥会有这个问题因为路由没有匹配上比如你把应用部署在 /xxx/ 下然后访问 /xxx/hello而代码里匹配的是 /hello那就匹配不上了而又没有定义 fallback 的路由比如 404那就会显示空白页。
怎么解决
可通过配置 base 解决。
export default {base: /path/to/your/app/root,
};使用 hashHistory
可通过配置 history 为 hash 为解决。
export default {history: hash,
};按需加载
要实现按需加载需装载 umi-plugin-react 插件并配置 dynamicImport。
export default {plugins: [[umi-plugin-react, {dynamicImport: true,}],],
};静态资源在非根目录或 cdn
这时就需要配置 publicPath
export default {publicPath: http://yourcdn/path/to/static/
}使用 runtime 的 publicPath
对于需要在 html 里管理 publicPath 的场景比如在 html 里判断环境做不同的输出可通过配置 runtimePublicPath 为解决。
export default {runtimePublicPath: true,
};然后在 html 里输出
script
window.publicPath % YOUR PUBLIC_PATH %
/script静态化
在一些场景中无法做服务端的 html fallback即让每个路由都输出 index.html 的内容那么就要做静态化。
比如上面的例子我们在 .umirc.js 里配置
export default {exportStatic: {},
}然后执行 umi build会为每个路由输出一个 html 文件。
./dist
├── index.html
├── list
│ └── index.html
└── static├── pages__index.5c0f5f51.async.js├── pages__list.f940b099.async.js├── umi.2eaebd79.js└── umi.f4cb51da.css注意静态化暂不支持有变量路由的场景。 HTML 后缀
有些静态化的场景里是不会自动读索引文件的比如支付宝的容器环境那么就不能生成这种 html 文件
├── index.html
├── list
│ └── index.html而是生成
├── index.html
└── list.html配置方式是在 .umirc.js 里
export default {exportStatic: {htmlSuffix: true,},
}umi build 会生成
./dist
├── index.html
├── list.html
└── static├── pages__index.5c0f5f51.async.js├── pages__list.f940b099.async.js├── umi.2924fdb7.js└── umi.cfe3ffab.css静态化后输出到任意路径
export default {exportStatic: {htmlSuffix: true,dynamicRoot: true,},
}
