快捷導(dǎo)航

Vue開發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法

更新時(shí)間：2019年08月15日 08:29:34 作者：StarlightUnion

這篇文章主要介紹了Vue開發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

如上圖所示，在開發(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è)......

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue 登錄滑動(dòng)驗(yàn)證實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 登錄滑動(dòng)驗(yàn)證實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-08-08
使用vue深度選擇器修改ElementUI組件內(nèi)樣式的示例代碼
在帶有scoped屬性的style中書寫樣式時(shí)，無法作用影響到子組件中的樣式，此時(shí)我們會(huì)使用到deep深度選擇器，來解決此問題，我們?cè)谑褂胠ess預(yù)處理器，能正常使用，但是在scss預(yù)處理器中會(huì)報(bào)錯(cuò)，下面通過本文介紹vue深度選擇器修改ElementUI組件內(nèi)樣式,需要的朋友可以參考下
2022-12-12
詳解關(guān)于vue-area-linkage走過的坑
這篇文章主要介紹了詳解關(guān)于vue-area-linkage走過的坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
vue3中ts語法使用element plus分頁組件警告錯(cuò)誤問題
這篇文章主要介紹了vue3中ts語法使用element plus分頁組件警告錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
VSCode前端Vue項(xiàng)目引入Element-ui組件三步簡(jiǎn)單操作方法
elementui相當(dāng)于一個(gè)庫,封裝好的內(nèi)容,我們引入到vue項(xiàng)目中,就可用庫中的內(nèi)容,這篇文章主要給大家介紹了關(guān)于VSCode前端Vue項(xiàng)目引入Element-ui組件的三步簡(jiǎn)單操作方法,需要的朋友可以參考下
2024-07-07
在vue中路由使用this.$router.go(-1)返回兩次問題
這篇文章主要介紹了在vue中路由使用this.$router.go(-1)返回兩次問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
在vue-cli中引入lodash.js并使用詳解
今天小編就為大家分享一篇在vue-cli中引入lodash.js并使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
淺談ElementUI el-select 數(shù)據(jù)過多解決辦法
下拉框的選項(xiàng)很多，上萬個(gè)選項(xiàng)甚至更多，這個(gè)時(shí)候如果全部把數(shù)據(jù)放到下拉框中渲染出來，瀏覽器會(huì)卡死，體驗(yàn)會(huì)特別不好，本文主要介紹了ElementUI el-select 數(shù)據(jù)過多解決辦法，感興趣的可以了解一下
2021-09-09
Vue.js與 ASP.NET Core 服務(wù)端渲染功能整合
本文通過案例給大家詳細(xì)分析了ASP.NET Core 與 Vue.js 服務(wù)端渲染,需要的朋友可以參考下
2017-11-11
vue實(shí)現(xiàn)面包屑的方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)面包屑的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04