undefinedfix
Sign in

Vue executes NPM run build without cross domain setting

Sicay edited in Fri, 05 Aug 2022

1: Problem Description: using Vue to develop the cross domain problem of local calling interface of the project vue.config.js To solve the local problem of proxy configuration in NPM run build, we need to change the proxy address back to the original correct interface when we go online, so there are too many interfaces and the efficiency is very low. So I want to ask how to call the original interface address directly without executing the proxy setting after NPM run build

2: ` devServer : {

proxy: {
  '/api': {
    target: 'http://202.97.183.28:9090',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

},`

3: I found a lot of descriptions on the Internet, basically describing how to solve the problem of cross domain in specific environment. Please see if there are any good ways to improve efficiency

4 Replies
ryloq
commented on Fri, 05 Aug 2022
  1. Use the public interface entrance to manage, use process.env.NODE_ Env to distinguish development environment from production environment
  2. Devserver is only applicable to the development environment. For the production environment, please use nginx or the backend to set the request header to handle cross domain
MenInTheMiddle
commented on Fri, 05 Aug 2022

Configure config in . vue . JS time . Judge whether to enable proxy according to the environment

  • A simple example is as follows

config.vue.js

const env = ??? // 忘记怎么取参数了,这个参数是npm run build 命令package里面传进来的
const config = {};
// 如果是生产环境则不添加代理
if(env === 'production') {
  config = {},
}
// 如果是开发环境,则添加
if (evn === 'development') {
  config = {
    proxy: {} // ... 
  }
}
module.exports = {
  ...config
}

tips

  • The code above is just an idea
  • The configuration item must have been written wrong~~~
veno46
commented on Fri, 05 Aug 2022

The problem has been solved. It's really based on the environment variable. Because I use vue-cli3.0, I need to set it in the root directory env.development And env.production Define the same variable corresponding to the name of API env.production The content of is Vue_ APP_ HOSTAPI = http://202.97.183.28 :9090. env.development The content of is Vue_ APP_ Hostapi = / API, and then add environment variables to it when using axiso call, such as axios.get (${ process.env.VUE_ APP_ HOSTAPI}/ api.search.do ...)

lightsaber
commented on Fri, 05 Aug 2022

Is there an article to describe the solution

lock This question has been locked and the reply function has been disabled.