vue-cli3 cross-domain configuration

Cross-Domain Proxy Configuration

Since the default configuration 3.x are transferred to the CLI service years, so the project has not generated configuration items, if we need to customize the configuration of a number of projects, you need to create a project in the root directory (root) vue.config.js. vue.config.jsWhere all configuration items are optional, which avoids us to see a lot of unnecessary default configuration, only need to configure some of their needs on the line. [ Official document ]

---

Since the deployment directory baseUrl is associated, we need only variable is the development environment, so we do not move as much as possible baseUrl this variable in order to avoid problems when deployed. So here slightly modified configuration.

The demand is that we only need to configure a proxy cross-domain in a development environment, so we can add environment variables can be configured in the proxy to the development environment. The official provided the environment variable configuration scheme.

In the root directory of the project, we create a .env.developmentfile to do the development environment variable settings.

We .env.developmentset the variable case file VUE_APP_BASE_API=/apito the devServer the proxy url rewriting assigned to VUE_APP_BASE_API, we are only in axiosthe packaging solutions using VUE_APP_BASE_APIthis variable, you can set the corresponding variable on devServer.

// vue.config.js
module.exports = {
    // 修改的配置
    // 将baseUrl: '/api',改为baseUrl: '/',
    baseUrl: '/', devServer: { proxy: { '/api': { target: 'http://www.example.org', changeOrigin: true, ws: true, pathRewrite: { '^/api': '' } } } } } // .env.development VUE_APP_BASE_API=/api

---

Here is still used http-proxy-middleware to do proxy configuration, some custom configuration can be the venue to be a reference to the official website.