Vue.jsデバッグアドレスポート番号の変更
3929 ワード
Vueプロジェクトは、一般に、付属の足場ツール
この文書では、Vueプロジェクトのポートのプロファイルを見つけ、変更する方法について説明します.
まず、プロジェクトルートの
startノードは、プロジェクト配置コンパイルのエントリファイルを構成します.一般的にデフォルトは
では、プロファイルはどこにありますか.
ここから分かるように、新しいファイル
ここでの
vue-cli
およびwebpack
を使用してパッケージ化され、プロジェクト構築運転を行う.開発では、コンソールでコマンドラインnpm run dev
を入力してプロジェクトを配置した後、デフォルトで開いているページデバッグアドレスは8080ポートです.しかし、複数のプロジェクトの開発を行うには、複数のvueプロジェクトを同時に導入する必要があり、バックグラウンドプロジェクトを起動する必要がある場合もあります.この場合、Vueプロジェクトの起動ポートを変更する必要があります(そうしないと、ポートが占有されているエラーが報告され、1つのポート番号は1つのプロセスしか占有されません).この文書では、Vueプロジェクトのポートのプロファイルを見つけ、変更する方法について説明します.
まず、プロジェクトルートの
webpack
のプロファイルpackage.json
を開き、次のコードを見つけます. "scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
}
startノードは、プロジェクト配置コンパイルのエントリファイルを構成します.一般的にデフォルトは
build/dev-server.js
です.buildディレクトリの下にあるファイルの次のコードを見つけます.var uri = 'http://localhost:' + port
uri
は私たちのプロジェクトの配置の住所の名前で、port
はポート番号で、私たちはここでport
を新しいポート番号に変更してもいいです.実際の開発では,このようにコードにハードコーディングを採用することを提案するのではなく,統一されたプロファイルによって定義する.では、プロファイルはどこにありますか.
dev-server.js
ファイルの次のコードを見続けます.var webpackConfig = require('./webpack.dev.conf')
ここから分かるように、新しいファイル
webpack.dev.conf
が導入され、引き続きクリックすると、それ自体が特定のフィールドの設定作業を担当していないことがわかりました.ただ、統一管理のために他のプロファイルを導入しただけで、次のコードが見つかりました.var config = require('../config')
ここでの
config
はファイルです.ディレクトリの下にあるindex.js
を開きます.ポート番号の最終設定の場所です. dev: {
env: require('./dev.env'),
port: 8082,
autoOpenBrowser: true,
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
}
port
を新しい値に変更すればいいです.ここの8082
のように、プロジェクトを再配置し、ポート番号の変更に成功しました.