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 アプリケーションにドメイン名を追加する方法を紹介します。

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

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