vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue项目启动设置默认启动页

vue项目启动如何设置默认启动页

作者:小杨爱编程

这篇文章主要介绍了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用默认的就好了我们不做配置运行起来是正常的!

如果非要设置也可以!只是状态值 变成了一样的 并不影响项目

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文