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

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

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

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

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

1.Vue 2.x

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

module.exports = {
  dev: {
    env: require('./dev.env'),
    port: 8080,  // 端口號
    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中修改端口號則需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)vue.config.js，內(nèi)容如下。

module.exports = {
  devServer: {
    port: 8080,   // 端口號
  }
};

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è)的端口號都是8080，沖突了。至于為什么同一個(gè)端口號能運(yùn)行兩個(gè)項(xiàng)目，是因?yàn)閂ue3.0運(yùn)行時(shí)會(huì)產(chǎn)生兩個(gè)項(xiàng)目地址（如下圖），我點(diǎn)了后一個(gè)......

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

您可能感興趣的文章:

相關(guān)文章

Vue transition實(shí)現(xiàn)點(diǎn)贊動(dòng)畫效果的示例
點(diǎn)贊動(dòng)畫是網(wǎng)頁評論中常見的功能，本文將介紹如何用vue實(shí)現(xiàn)這一效果。點(diǎn)贊時(shí)愛心縮小變大，變大時(shí)略微大一點(diǎn)再變正常，取消點(diǎn)贊時(shí)愛心無動(dòng)畫，同時(shí)數(shù)字滾動(dòng)，+1 時(shí)向上滾動(dòng)，-1 時(shí)向下滾動(dòng)
2021-05-05
Vue Router中的冗余導(dǎo)航錯(cuò)誤及解決方案
在現(xiàn)代前端開發(fā)中,單頁應(yīng)用（SPA）已經(jīng)成為主流,而 Vue.js 作為一款流行的前端框架,其官方路由庫 Vue Router 則是構(gòu)建 SPA 的核心工具之一,在使用 Vue Router 的過程中,開發(fā)者可能會(huì)遇到一些常見的錯(cuò)誤,本文將深入探討這一錯(cuò)誤的原因、影響以及解決方案
2025-01-01
vue實(shí)現(xiàn)移動(dòng)端彈出鍵盤功能(防止頁面fixed布局錯(cuò)亂)
這篇文章主要介紹了vue?解決移動(dòng)端彈出鍵盤導(dǎo)致頁面fixed布局錯(cuò)亂的問題,通過實(shí)例代碼給大家分享解決方案，對vue?移動(dòng)端彈出鍵盤相關(guān)知識感興趣的朋友一起看看吧
2022-04-04
一篇帶你搞懂Vue中的自定義指令
自定義指令,是Vue提供的一種擴(kuò)展和定制的機(jī)制,使開發(fā)者能夠在組件中直接操作DOM、處理事件、添加樣式等,并提供了與第三方庫集成的方式,定義指令使得Vue在處理交互和DOM操作時(shí)更加靈活和強(qiáng)大,本文將帶大家搞懂Vue中的自定義指令,需要的朋友可以參考下
2023-07-07
vue實(shí)現(xiàn)電子時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)電子時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
一文詳解Vue如何整合Echarts實(shí)現(xiàn)可視化界面
ECharts，縮寫來自Enterprise Charts，商業(yè)級數(shù)據(jù)圖表，一個(gè)純Javascript的圖表庫，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上。本文將在Vue中整合Echarts實(shí)現(xiàn)可視化界面，感興趣的可以了解一下
2022-04-04
Vue的Eslint配置文件eslintrc.js說明與規(guī)則介紹
最近在跟著視頻敲項(xiàng)目時(shí)，代碼提示出現(xiàn)很多奇奇怪怪的錯(cuò)誤提示，百度了一下是eslintrc.js文件沒有配置相關(guān)命令，ESlint的語法檢測真的令人抓狂，現(xiàn)在總結(jié)一下這些命令的解釋
2020-02-02
vue中tinymce的使用實(shí)例詳解
TinyMCE Vue是TinyMCE官方發(fā)布的Vue組件，可以更輕松地在Vue應(yīng)用程序中使用TinyMCE，這篇文章主要介紹了vue中tinymce的使用,需要的朋友可以參考下
2022-11-11
Vue2?Dialog彈窗函數(shù)式調(diào)用實(shí)踐示例
這篇文章主要為大家介紹了Vue2?Dialog彈窗函數(shù)式調(diào)用實(shí)踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
用Vue.extend構(gòu)建消息提示組件的方法實(shí)例
本篇文章主要介紹了用Vue.extend構(gòu)建消息提示組件的方法實(shí)例，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-08-08