How to add a domain name to vue

When developing a Vue application, it is usually necessary to configure a domain name for it, which can make us more convenient and professional when deploying the application. This article will introduce how to add a domain name to a Vue application.

First, we need to open the configuration file of the Vue application. This file is usually vue.config.js located in the root directory. If this file does not exist in our project, we can create it by running vue add @vue/cli-plugin-config in the project root directory. Once created, we can open the file and configure it as follows.

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

In the above code, devServer is the development server configuration item of Vue-cli, where we can specify the host domain name that the development server listens to through the host attribute . Here we specify www.example.com. If you want to specify the IP address to monitor, you can directly fill in the corresponding IP address. In addition, we can also specify the port number that the development server listens to through the port attribute. For example, here we specify 8080.

In addition to the host domain name and port number, we can also specify whether to use the https protocol through the https attribute, and the hotOnly attribute to specify whether to enable hot module replacement. If we specify https: true, we need to generate an HTTPS certificate locally first and add it to the configuration of the development server.

After the configuration is complete, we can start the development server by entering npm run serve in the terminal. At this time, enter www.example.com:8080 in the browser to access our Vue application.

If we want to use different domain names in different environments, we can achieve this by defining different commands in the scripts option of the package.json file. For example, we can add the following command in the scripts option:

"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",
}

With the --mode option, we can specify different environments and thus use different domain names. For example, when we run the npm run serve:dev command, Vue will use an environment named development and automatically open www.dev.example in the browser. com:8080.

Summary:

This article introduces how to add a domain name to a Vue application. By configuring the host domain name and port number in the vue.config.js file, we can specify the host domain name that the development server listens to, and use different domain names through different commands to make our application deployment more professional. ization and convenience.

The above is the detailed content of How to add a domain name to vue. For more information, please follow other related articles on the PHP Chinese website!