vue-router history 模式的各種場景

背景

默認(rèn)模式<domain>#/<path>

  • 優(yōu)點(diǎn)是直接可以用翔悠,無需做額外配置
  • 缺點(diǎn)是跟常規(guī)的URL方式不一致博脑,造型古怪碳却,想要在URL上加參數(shù)的時候容易出錯

history模式<domain>/<path>

  • 優(yōu)點(diǎn)是符合URL標(biāo)準(zhǔn)格式
  • 缺點(diǎn)是需要做額外的配置

解法 -- 以 test.linkaka.cn 為例

部署在根域名下 test.linkaka.cn/<path>

  • <project path>/src/router.js

    export default new Router({
      // 命名:組件名大駝峰拟杉、path/name小駝峰
      mode: 'history',
      base,
      routes: [
        // routes
      ]
    })
    
  • nginx.conf配置

    server {
      listen 80;
      server_name test.linkaka.cn;
      root /home/static/test.linkaka.cn;
      index index.html index.htm;
      location ^~/ {
        access_log off;
        try_files $uri $uri / /index.html;
      }
    }
    

部署在子路由下 test.linkaka.cn/demo/<path>

  • 以下路由親測有效

    有子路由:
    test.linkaka.cn/demo  有效
    test.linkaka.cn/demo/news  有效
    test.linkaka.cn/demo/news/someid  有效
    
  • <project path>/src/router.js

    const getRoute = (name, path = `/${name}`) => ({
      name,
      path,
      component: resolve => require([`@/views/${name}.vue`], resolve)
    })
    const routes = [
      getRoute('home', '/'),
      getRoute('news', '/news/:id')
    ]
    
    // 通用做法,不需要關(guān)心到底是部署在那個子路由下面
    const base = routes.reduce((pre, {name}) => {
      const reg = RegExp(`/${name}.*`)
      return pre.replace(reg, '')
    }, location.pathname)
    
    export default new Router({
      // 命名:組件名大駝峰弄屡、path/name小駝峰
      mode: 'history',
      // 通用做法
      // base: base,
    
      // 更優(yōu)的做法
      base: env.baseRoute,
      routes: routes.concat([
        { path: '*', redirect: '/' }
      ])
    })
    
  • webpack config

    • <project path>/config/dev.env.js
      'use strict'
      module.exports = {
        NODE_ENV: '"development"',
        baseRoute: '"/"',
      }
      
    • <project path>/config/test.env.js
      'use strict'
      const merge = require('webpack-merge')
      const devEnv = require('./dev.env')
      
      module.exports = merge(devEnv, {
        NODE_ENV: '"testing"',
        baseRoute: '"/icity.jd.com"'
      })
      
    • <project path>/config/prod.env.js
      'use strict'
      module.exports = {
        NODE_ENV: '"production"',
        baseRoute: '"/"',
        domain: {
          icity: '"http://101.124.15.81:9080/icity/front"'
        }
      }
      
    • <project path>/build/webpack.prod.conf.js
      // ...
      
      const env = process.env.NODE_ENV === 'testing'
        ? require('../config/test.env')
        : require('../config/prod.env')
      const webpackConfig = merge(baseWebpackConfig, {
        //...
      
        output: {
          publicPath: JSON.parse(env.baseRoute),
          // ...
      
        },
      })
      
  • nginx.conf 配置

    server {
      listen 80;
      server_name test.linkaka.cn;
      root /home/static/test.linkaka.cn;
      index index.html index.htm;
      location /icity.jd.com {
        access_log off;
        # try_files $uri $uri/ /index.html;
        if ( !-e $request_filename) {
          rewrite ^/(.*) /icity.jd.com/index.html last;
          break;
        }
      }
    }
    

運(yùn)行命令

  • "start": "npm run dev",
  • "build:test": "NODE_ENV=testing node build/build.js",
  • "build": "NODE_ENV=production node build/build.js"

總結(jié)

不吹不黑题禀,所有功能親測有效。 在這個過程中也發(fā)現(xiàn)了config/*.env.js的作用膀捷。 以前都是自己新定義一個變量迈嘹,感覺作者的這個環(huán)境配置的有些凌亂,通過這次的vue-router的實(shí)踐全庸,發(fā)現(xiàn)作者的這種做法還是很有優(yōu)勢的秀仲。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市壶笼,隨后出現(xiàn)的幾起案子神僵,更是在濱河造成了極大的恐慌,老刑警劉巖覆劈,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件保礼,死亡現(xiàn)場離奇詭異,居然都是意外死亡墩崩,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進(jìn)店門侯勉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鹦筹,“玉大人,你說我怎么就攤上這事址貌☆砉眨” “怎么了徘键?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長遍蟋。 經(jīng)常有香客問我吹害,道長,這世上最難降的妖魔是什么虚青? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任它呀,我火速辦了婚禮,結(jié)果婚禮上棒厘,老公的妹妹穿的比我還像新娘纵穿。我一直安慰自己,他們只是感情好奢人,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布谓媒。 她就那樣靜靜地躺著,像睡著了一般何乎。 火紅的嫁衣襯著肌膚如雪句惯。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天支救,我揣著相機(jī)與錄音抢野,去河邊找鬼。 笑死搂妻,一個胖子當(dāng)著我的面吹牛蒙保,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播欲主,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼邓厕,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了扁瓢?” 一聲冷哼從身側(cè)響起详恼,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎引几,沒想到半個月后昧互,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡伟桅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年敞掘,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片楣铁。...
    茶點(diǎn)故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡玖雁,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出盖腕,到底是詐尸還是另有隱情赫冬,我是刑警寧澤浓镜,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站劲厌,受9級特大地震影響膛薛,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜补鼻,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一哄啄、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧辽幌,春花似錦增淹、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至加酵,卻和暖如春拳喻,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背猪腕。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工冗澈, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人陋葡。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓亚亲,卻偏偏與公主長得像,于是被迫代替她去往敵國和親腐缤。 傳聞我的和親對象是個殘疾皇子捌归,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內(nèi)容