快捷導(dǎo)航

vue.config.js中的devServer使用

更新時(shí)間：2024年03月04日 09:17:34 作者：左直拳

這篇文章主要介紹了vue.config.js中的devServer使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue.config.js中的devServer

按照我的經(jīng)歷，我認(rèn)為學(xué)習(xí)vue一個(gè)障礙和困難，是不容易了解它整個(gè)項(xiàng)目結(jié)構(gòu)。*.vue本身的內(nèi)容較容易掌握，但更大的方面，比如它整個(gè)項(xiàng)目的運(yùn)行機(jī)制，路由，配置，就比較諱莫如深了。

資料很少，說(shuō)的人也是不知從哪里抄的，沒(méi)有說(shuō)清楚。

對(duì)于像我這樣普通的開(kāi)發(fā)者來(lái)說(shuō)，讓我不用啥框架，直接用空白項(xiàng)目搗鼓出一個(gè)看得過(guò)去的前端，我會(huì)感到困難重重，這也不知，那也不懂，無(wú)從下手。

這其中，就包括這個(gè)vue.config.js。

vue.config.js，就是vue項(xiàng)目的配置文件咯。一度傳聞vue3創(chuàng)建項(xiàng)目時(shí)，默認(rèn)是不提供這個(gè)文件，要用的話(huà)只能自己手動(dòng)創(chuàng)建。

但一旦創(chuàng)建，vue又會(huì)自動(dòng)地優(yōu)先使用其中的配置。這給人一種很扯的感覺(jué)。

不過(guò)，不久前我創(chuàng)建vue3項(xiàng)目，里面是有vue.config.js的。其實(shí)，vue也沒(méi)有什么好神秘的，它就是一個(gè)巨大的語(yǔ)法糖，或者解釋器。

雖然它創(chuàng)建了這樣那樣的書(shū)寫(xiě)結(jié)構(gòu)，但最終是要編譯成原始的js。

你看vue3的語(yǔ)法，我感覺(jué)并不比vue2更高明，反而有種累贅和啰嗦的感覺(jué)，估計(jì)VUE4還要來(lái)個(gè)大改，折騰不止，至死方休。

說(shuō)回vue.config.js

vue.config.js里面，同樣有許多神秘的咒語(yǔ)。

不過(guò)后來(lái)逐漸有了一些發(fā)現(xiàn)。

下面這段代碼就摘自我們之前一個(gè)vue項(xiàng)目的vue.config.js。

module.exports = {
  devServer: {
    port: 8090, // 端口號(hào)，如果端口號(hào)被占用，會(huì)自動(dòng)加1
    host: '0.0.0.0',// 主機(jī)名， 127.0.0.1，  真機(jī) 0.0.0.0
    https: false, //協(xié)議
    open: false, //啟動(dòng)服務(wù)時(shí)自動(dòng)打開(kāi)瀏覽器訪問(wèn)
    disableHostCheck: true,
    proxy: {
      '/api':{
        target:PROXY_API_BASE_URL,
        pathRewrite:{
          "^/api":""
        }
      },
      '/webapps':{
        target:PROXY_BASE_URL,
        pathRewrite:{
          "^/webapps":"/webapps"
        }
      },
      '/javapubzy':{
        target:PROXY_BASE_URL,
        pathRewrite:{
          "^/javapubzy":"/javapubzy"
        }
      },
      '/arcgis':{
        target:PROXY_BASE_URL,
        pathRewrite:{
          "^/arcgis":"/arcgis"
        }
      }
    }
  },
  。。。
}

代碼中，devServer算是系統(tǒng)的保留字，用來(lái)配置我們的開(kāi)發(fā)環(huán)境，從名字也能看出來(lái)。

所以，別看它里面寫(xiě)了這么多，又是端口，又是代理，讓人一看就頭大，其實(shí)只是用于我們本機(jī)開(kāi)發(fā)和調(diào)試。

一旦發(fā)布和打包，就與它無(wú)關(guān)了。

我們將發(fā)布包部署到nginx，端口和轉(zhuǎn)發(fā)，就遵循nginx的設(shè)置：

http {
    include       mime.types;
    default_type  application/octet-stream;	
    sendfile        on;

	server {
	    listen       8081;
        server_name  192.168.10.8;

		location / {
			root   E:/code/web/dist;		
			index  index.html;
			try_files $uri $uri/ /index.html;
		}

		location /api/ {
			proxy_pass http://192.168.10.9:8090/;#必須斜杠/結(jié)尾
			proxy_set_header   X-Forwarded-Proto $scheme;
			proxy_set_header   Host              $http_host;
			proxy_set_header   X-Real-IP         $remote_addr;
		}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
	}
}

咦，孰為汝多知乎。