vue项目启动如何设置默认启动页
更新时间：2023年06月29日 08:52:42 作者：小杨爱编程
这篇文章主要介绍了vue项目启动如何设置默认启动页问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue项目启动设置默认启动页
当我们在启动vue项目时，默认打开的界面是白色的，需要输入正确的路由才能访问正确的页面。
我们应该如何让项目打开的时候默认跳转到想启动的页面呢？
我们需要在router的index.ts（js）文件中设置路由规则,例如我们默认打开index页面，我们只需要设置routes，内容如下：
routes:[
{
path:'/index',
component:Index
},
{
path:'/',
redirect:'/index' //默认显示
}
]这样就可以做到打开项目时，自动重定向到index页面。
Ok，完活！
vue默认启动项目自动开启浏览器，网址http://0.0.0.0:8080
自动打开浏览器网址0.0.0.0:8080问题
vue.config.js中：最初我是这样配置的,浏览器默认打开的0.0.0.0:8080
devServer: { //代理
// host: process.env.Host || "localhost",
host: process.env.Host || "0.0.0.0",
port: 8080,
open: true,
compress:true
},vue.config.js中：我们只要把host 改成 'localhost' ，重新pnpm run serve 就可以解决这个问题
devServer: { //代理
host: process.env.Host || "localhost",
port: 8080,
open: true,
compress:true
},虽然自动打开的问题解决了，这样设置我有发现了新的问题，下面的状态变成了一样的，host换成 0.0.0.0就不会有这个问题，但是上面自动打开哪里又崩掉了=.=
最终通过验证发现跟vue-cli 的版本有关 vue-cli5 以下的版本这样配置是不会有问题的，完美解决
devServer: { //代理
// host: process.env.Host || "localhost",
host: process.env.Host || "0.0.0.0",
port: 8080,
open: true,
compress:true
},
vue-cli5以上的配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false, //禁用eslint报错 好恶心--
// 跨域配置
devServer:{
// host:"localhost",
// port:8080,
https:false,
// 跨域配置
proxy:{
"/api":{
target:"http://127.0.0.1:8080",
changOrigin:true,
ws:true,
pathRewrite:{
"^/api":""
}
}
}
}
})注：这里的host，prot用默认的就好了我们不做配置运行起来是正常的！
如果非要设置也可以！只是状态值 变成了一样的 并不影响项目
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue echarts实现航班选座案例分析,代码是使用echarts来实现的，主要用到的是svg和自定义地图的相关知识，需要的朋友可以参考下2022-05-05
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
这篇文章主要介绍了Vue使用路由钩子拦截器beforeEach和afterEach监听路由,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
今天小编就为大家分享一篇在Vue methods中调用filters里的过滤器实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
在Web开发中，有时候需要对网页进行截图或截屏，Vue作为一个流行的JavaScript框架，提供了一些工具和库，可以方便地实现网页截图和截屏功能，本文将介绍如何在Vue中进行网页截图和截屏,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue引用echarts饼图不显示图例的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要为大家介绍了Vue之监听数据的原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>2021-11-11
这篇文章主要为大家详细介绍了一个可复用的vue分页组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最近公司项目比较少终于有空来记录一下自己对vue-router的一些小小的使用心得，本文给大家分享vue router自动判断左右翻页转场动画效果，感兴趣的朋友一起看看吧2017-10-10
本文主要介绍了Vue3中key的作用和工作原理，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
本文主要介绍了Element如何实现loading的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
最新评论