vue 3.0用history路由打包后出现空白页面
vue 3.0用history路由打包后出现空白页面,出现这个问题可以先检查两个方面1. 打包路径是否有误,这个打开控制台就可以看到,如果有出现报错,则说明打包的路径不对,这时要修改打包的路径。比如项目是放在/dist/下,访问的路径为http://127.0.0.1/dist/,那打包的路径要修改为/dist/router.js的设置export default new Router({...
vue 3.0用history路由打包后出现空白页面,出现这个问题可以先检查两个方面
1. 打包路径是否有误,这个打开控制台就可以看到,如果有出现报错,则说明打包的路径不对,这时要修改打包的路径。
比如项目是放在/dist/下,访问的路径为http://127.0.0.1/dist/
,那打包的路径要修改为/dist/
router.js的设置
export default new Router({
mode: 'history',
// base: process.env.BASE_URL,
base: '/dist/',
routes: [...]
vue.config.js的设置
module.exports = {
publicPath: '/dist/',
outputDir: 'dist',
打包后我是放在本地的nginx下的
输入http://127.0.0.1/dist/
就可以访问啦
2. 如果/目录可以访问,从/跳转过去也可以访问,直接输入其他页面却不能访问,这样子就要设置一下nginx了,更详细地请看官方文档
location / {
try_files $uri $uri/ /dist/index.html;
# $uri是一个变量,代表访问的路径,这样设置就是当访问不到的路径的时候跳转回首页,跳转回首页之后,vue.router就会将我们所输入的地址push进去了,从而实现访问
}
由于这个是单页面应用,只有一个html文件,直接输入路径肯定是找不到的,vue访问其他路由是通过router.push进去的。
$uri是一个变量,代表访问的路径,这样设置就是当访问不到的路径的时候跳转回首页,跳转回首页之后,vue.router就会将我们所输入的地址push进去了,从而实现访问
修改后,重启一下nginx应该就可以访问了
参考于官方文档
vue路由详解:https://router.vuejs.org/zh/api/#router-link
HTML5 History 模式:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
更多推荐
所有评论(0)