vue.config.js中的devServer使用

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

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

vue.config.js中的devServer

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

資料很少，說的人也是不知從哪里抄的，沒有說清楚。

對于像我這樣普通的開發(fā)者來說，讓我不用啥框架，直接用空白項目搗鼓出一個看得過去的前端，我會感到困難重重，這也不知，那也不懂，無從下手。

這其中，就包括這個vue.config.js。

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

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

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

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

你看vue3的語法，我感覺并不比vue2更高明，反而有種累贅和啰嗦的感覺，估計VUE4還要來個大改，折騰不止，至死方休。

說回vue.config.js

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

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

下面這段代碼就摘自我們之前一個vue項目的vue.config.js。

module.exports = {
  devServer: {
    port: 8090, // 端口號，如果端口號被占用，會自動加1
    host: '0.0.0.0',// 主機名， 127.0.0.1，  真機 0.0.0.0
    https: false, //協(xié)議
    open: false, //啟動服務(wù)時自動打開瀏覽器訪問
    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)的保留字，用來配置我們的開發(fā)環(huán)境，從名字也能看出來。

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

一旦發(fā)布和打包，就與它無關(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;
        }
	}
}

咦，孰為汝多知乎。