Vue開發環境中修改端口號

如上圖所示，在開發環境中， 8080即是端口號，這也是使用Vue腳手架建立的項目運行時的默認的端口。

1.Vue 2.x

config文件夾中有一個 index.js其中部份內容以下， 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中修改端口號則須要在項目根目錄下建立一個 vue.config.js，內容以下。

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

今天我調試練手的項目時發現報了這麼個錯誤，當時百度了很久不得解決要領，後來想起來本身開了兩個項目，一個是 Vue2.x，另外一個是 Vue3.x，看來一下兩個的端口號都是8080，衝突了。 至於爲何同一個端口號能運行兩個項目，是由於Vue3.0運行時會產生兩個項目地址（以下圖），我點了後一個......