Vue開發(fā)環(huán)境中修改端口號的實現(xiàn)方法
更新時間：2019年08月15日 08:29:34 作者：StarlightUnion
這篇文章主要介紹了Vue開發(fā)環(huán)境中修改端口號的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
Vue開發(fā)環(huán)境中修改端口號
如上圖所示，在開發(fā)環(huán)境中，8080便是端口號，這也是使用Vue腳手架創(chuàng)建的項目運行時的默認(rèn)的端口。
1.Vue 2.x
config文件夾中有一個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中修改端口號則需要在項目根目錄下創(chuàng)建一個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)試練手的項目時發(fā)現(xiàn)報了這么個錯誤，當(dāng)時百度了好久不得解決要領(lǐng)，后來想起來自己開了兩個項目，一個是Vue2.x，另一個是Vue3.x，看來一下兩個的端口號都是8080，沖突了。至于為什么同一個端口號能運行兩個項目，是因為Vue3.0運行時會產(chǎn)生兩個項目地址（如下圖），我點了后一個......
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue transition實現(xiàn)點贊動畫效果的示例
點贊動畫是網(wǎng)頁評論中常見的功能，本文將介紹如何用vue實現(xiàn)這一效果。點贊時愛心縮小變大，變大時略微大一點再變正常，取消點贊時愛心無動畫，同時數(shù)字滾動，+1 時向上滾動，-1 時向下滾動2021-05-05
在現(xiàn)代前端開發(fā)中,單頁應(yīng)用（SPA）已經(jīng)成為主流,而 Vue.js 作為一款流行的前端框架,其官方路由庫 Vue Router 則是構(gòu)建 SPA 的核心工具之一,在使用 Vue Router 的過程中,開發(fā)者可能會遇到一些常見的錯誤,本文將深入探討這一錯誤的原因、影響以及解決方案2025-01-01
vue實現(xiàn)移動端彈出鍵盤功能(防止頁面fixed布局錯亂)
這篇文章主要介紹了vue?解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題,通過實例代碼給大家分享解決方案，對vue?移動端彈出鍵盤相關(guān)知識感興趣的朋友一起看看吧2022-04-04
自定義指令,是Vue提供的一種擴展和定制的機制,使開發(fā)者能夠在組件中直接操作DOM、處理事件、添加樣式等,并提供了與第三方庫集成的方式,定義指令使得Vue在處理交互和DOM操作時更加靈活和強大,本文將帶大家搞懂Vue中的自定義指令,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)電子時鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
一文詳解Vue如何整合Echarts實現(xiàn)可視化界面
ECharts，縮寫來自Enterprise Charts，商業(yè)級數(shù)據(jù)圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設(shè)備上。本文將在Vue中整合Echarts實現(xiàn)可視化界面，感興趣的可以了解一下2022-04-04
Vue的Eslint配置文件eslintrc.js說明與規(guī)則介紹
最近在跟著視頻敲項目時，代碼提示出現(xiàn)很多奇奇怪怪的錯誤提示，百度了一下是eslintrc.js文件沒有配置相關(guān)命令，ESlint的語法檢測真的令人抓狂，現(xiàn)在總結(jié)一下這些命令的解釋2020-02-02
TinyMCE Vue是TinyMCE官方發(fā)布的Vue組件，可以更輕松地在Vue應(yīng)用程序中使用TinyMCE，這篇文章主要介紹了vue中tinymce的使用,需要的朋友可以參考下2022-11-11
Vue2?Dialog彈窗函數(shù)式調(diào)用實踐示例
這篇文章主要為大家介紹了Vue2?Dialog彈窗函數(shù)式調(diào)用實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
本篇文章主要介紹了用Vue.extend構(gòu)建消息提示組件的方法實例，具有一定的參考價值，有興趣的可以了解一下2017-08-08