vue項(xiàng)目啟動如何設(shè)置默認(rèn)啟動頁

更新時(shí)間：2023年06月29日 08:52:42 作者：小楊愛編程

這篇文章主要介紹了vue項(xiàng)目啟動如何設(shè)置默認(rèn)啟動頁問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue項(xiàng)目啟動設(shè)置默認(rèn)啟動頁

當(dāng)我們在啟動vue項(xiàng)目時(shí)，默認(rèn)打開的界面是白色的，需要輸入正確的路由才能訪問正確的頁面。

我們應(yīng)該如何讓項(xiàng)目打開的時(shí)候默認(rèn)跳轉(zhuǎn)到想啟動的頁面呢？

我們需要在router的index.ts（js）文件中設(shè)置路由規(guī)則,例如我們默認(rèn)打開index頁面，我們只需要設(shè)置routes，內(nèi)容如下：

routes:[
? ? ? ? {
? ? ? ? ? ? path:'/index',
? ? ? ? ? ? component:Index　
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? path:'/',
? ? ? ? ? ? redirect:'/index'　　//默認(rèn)顯示
? ? ? ? }
? ? ]

這樣就可以做到打開項(xiàng)目時(shí)，自動重定向到index頁面。

Ok，完活！

vue默認(rèn)啟動項(xiàng)目自動開啟瀏覽器，網(wǎng)址http://0.0.0.0:8080

自動打開瀏覽器網(wǎng)址0.0.0.0:8080問題

vue.config.js中：最初我是這樣配置的,瀏覽器默認(rèn)打開的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 就可以解決這個(gè)問題

 devServer: { //代理
    host: process.env.Host || "localhost",
    port: 8080,
    open: true,
    compress:true
  },

雖然自動打開的問題解決了，這樣設(shè)置我有發(fā)現(xiàn)了新的問題，下面的狀態(tài)變成了一樣的，host換成 0.0.0.0就不會有這個(gè)問題，但是上面自動打開哪里又崩掉了=.=

最終通過驗(yàn)證發(fā)現(xiàn)跟vue-cli 的版本有關(guān) 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報(bào)錯(cuò)   好惡心--
  // 跨域配置  
  devServer:{
    // host:"localhost",
    // port:8080,
    https:false,
    // 跨域配置
    proxy:{
      "/api":{
        target:"http://127.0.0.1:8080",
        changOrigin:true,
        ws:true,
        pathRewrite:{
          "^/api":""
        }
      }
    }
  }
})

注：這里的host，prot用默認(rèn)的就好了我們不做配置運(yùn)行起來是正常的！