vueにドメイン名を追加する方法

Vue アプリケーションを開発するときは、通常、そのアプリケーションのドメイン名を構成する必要があります。これにより、アプリケーションをデプロイする際の利便性とプロフェッショナル性が向上します。この記事では、Vue アプリケーションにドメイン名を追加する方法を紹介します。

まず、Vue アプリケーションの構成ファイルを開く必要があります。このファイルは通常、ルート ディレクトリにあるvue.config.jsです。このファイルがプロジェクトに存在しない場合は、プロジェクトのルート ディレクトリでvue add @vue/cli-plugin-configを実行してファイルを作成できます。作成したら、ファイルを開いて次のように構成できます。

module.exports = { devServer: { host: 'www.example.com', // 指定开发服务器监听的主机域名 port: 8080, // 指定开发服务器监听的端口号 https: false, // 是否使用https协议 hotOnly: false // 是否启用热模块替换 } };

上記のコードでは、devServerは Vue-cli の開発サーバー構成項目であり、開発サーバーがhost を通じてリッスンするホスト ドメイン名を指定できます。 ＃＃＃ 属性 。ここではwww.example.comを指定します。監視する IP アドレスを指定する場合は、対応する IP アドレスを直接入力できます。さらに、開発サーバーがport属性を介してリッスンするポート番号を指定することもできます。たとえば、ここでは8080と指定します。

https属性とhotOnly属性を使用して https プロトコルを使用するかどうかも指定できます。ホットモジュール交換を有効にするかどうか。https: trueを指定する場合は、まずローカルで HTTPS 証明書を生成し、それを開発サーバーの構成に追加する必要があります。

npm runserveと入力して開発サーバーを起動できます。この時点で、ブラウザにwww.example.com:8080と入力して、Vue アプリケーションにアクセスします。

package.jsonファイルのscriptsオプションで異なるコマンドを定義することでこれを実現できます。たとえば、次のコマンドをscriptsオプションに追加できます。

"scripts": { "serve:dev": "vue-cli-service serve --mode development --open www.dev.example.com:8080", "serve:test": "vue-cli-service serve --mode test --open www.test.example.com:8080", "serve:prod": "vue-cli-service serve --mode production --open www.example.com:8080", }

--modeオプションを使用すると、異なる環境を指定できるため、異なるドメインを使用できます。名前。たとえば、npm runserve:devコマンドを実行すると、Vue はdevelopmentという名前の環境を使用し、ブラウザでwww.dev.example を自動的に開きます。 8080。

vue.config.jsファイルでホスト ドメイン名とポート番号を構成することで、開発サーバーがリッスンするホスト ドメイン名を指定し、さまざまなコマンドでさまざまなドメイン名を使用してアプリケーションを作成できます。導入のさらなるプロフェッショナル化と利便性。

以上がvueにドメイン名を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。