vue-cli项目打包后router-view中的内容不显示问题

今天博主实战vue项目终于到了尾声,迎来了打包阶段。但是发现打包完的index.html文件打开后只显示了左边菜单栏,router-view中的内容却没有显示出来,而且控制台也没有报错。如图所示:
router-view内容不显示
注:打包时候config文件夹中的index.js文件的build中的assetsPublicPath属性要改为 './' 这样的相对路径,博主已经靠前人的经验避过了这个坑。

博主在网上搜索问题时发现大部分都是说的前一个坑,这个坑很少有人提起。不过还好也顺利找到了问题原因和解决办法。

  1. 问题原因:
    在没有后端配合的情况下就打开路由history模式的时候(vue-router默认hash模式——使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载)
  2. 解决办法:
    注释mode
    注释自己设置的mode:'histroy'属性。
    当然,这里并不是说不能打开这个模式,这个模式需要后端设置的配合,详情可以参考vue-router文档
  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
首先,你需要安装Vue和Vue CLI。安装完成后,你可以使用Vue CLI创建一个新的Vue项目。 在命令行输入以下命令: ``` vue create my-project ``` 这将创建一个名为“my-project”的新Vue项目。接下来,你可以使用Vue Router和Vue组件来创建一个登录界面。 首先,在src目录下创建一个名为“views”的文件夹。在该文件夹创建一个名为“Login.vue”的文件。 在Login.vue文件,你可以使用Vue组件来创建一个登录表单。例如: ``` <template> <div> <h1>Login</h1> <form> <label for="username">Username:</label> <input type="text" id="username" v-model="username"> <br> <label for="password">Password:</label> <input type="password" id="password" v-model="password"> <br> <button type="submit">Login</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } } } </script> ``` 在该组件,我们创建了一个包含用户名和密码输入框的表单。我们还使用了v-model指令来绑定输入框的值到组件的数据。 接下来,你需要在App.vue文件使用Vue Router来渲染Login组件。例如: ``` <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> ``` 在该组件,我们使用了Vue Router的router-view组件来渲染当前路由的组件。现在,我们需要在router/index.js文件定义一个路由来渲染Login组件。例如: ``` import Vue from 'vue' import VueRouter from 'vue-router' import Login from '../views/Login.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Login', component: Login } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router ``` 在该文件,我们定义了一个名为“Login”的路由,该路由将渲染Login组件。现在,你可以在命令行运行以下命令来启动Vue应用程序: ``` npm run serve ``` 这将启动一个本地开发服务器,你可以在浏览器访问http://localhost:8080来查看你的登录界面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值