Vue開發(fā)環(huán)境中修改端口號(hào)

光澤ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

如上圖所示，在開發(fā)環(huán)境中，8080便是端口號(hào)，這也是使用Vue腳手架創(chuàng)建的項(xiàng)目運(yùn)行時(shí)的默認(rèn)的端口。

1.Vue 2.x

config文件夾中有一個(gè)index.js其中部分內(nèi)容如下，port即為端口號(hào)，在這里更改即可。

module.exports = {
  dev: {
    env: require('./dev.env'),
    port: 8080,  // 端口號(hào)
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false,
   }
};

2.Vue 3.x

Vue 3.x中修改端口號(hào)則需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)vue.config.js，內(nèi)容如下。

module.exports = {
  devServer: {
    port: 8080,   // 端口號(hào)
  }
};

3.起因

Access to XMLHttpRequest at 'http://localhost:8080/sockjs-node/info?t=1565711501046' from origin 'http://192.168.0.104:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

localhost:8080/sockjs-node/info?t=1565711501046:1 Failed to load resource: net::ERR_FAILED

今天我調(diào)試練手的項(xiàng)目時(shí)發(fā)現(xiàn)報(bào)了這么個(gè)錯(cuò)誤，當(dāng)時(shí)百度了好久不得解決要領(lǐng)，后來想起來自己開了兩個(gè)項(xiàng)目，一個(gè)是Vue2.x，另一個(gè)是Vue3.x，看來一下兩個(gè)的端口號(hào)都是8080，沖突了。至于為什么同一個(gè)端口號(hào)能運(yùn)行兩個(gè)項(xiàng)目，是因?yàn)閂ue3.0運(yùn)行時(shí)會(huì)產(chǎn)生兩個(gè)項(xiàng)目地址（如下圖），我點(diǎn)了后一個(gè)......

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。