javascript - Wie erstellt vue-cli unterschiedliche Schnittstellencodes für unterschiedliche Back-End-Schnittstellenserver?

Question

Während des Entwicklungsprozesses ist die von der Schnittstelle in der npm run dev-Komponente aufgerufene Adresse eine API-Variable, die von global global wie folgt definiert wird:

//Öffnen Sie die Entwicklungsumgebung
// global.API = '/api';

// Öffnen Sie die Testumgebung
// global.API = '/test';

//Offene uat-Umgebung
// global.API = '/uat';

// Öffnen Sie die Produktionsumgebung
// global.API = '/www';

Wie kann man in einer Produktionsumgebung die API automatisch in Produktionsumgebungsvariablen entsprechend den verschiedenen Schnittstellen ändern, wenn man npm run build verwendet?

Answer 1

琢磨了几天vue-cli生成的代码，vue觉得你只需要三种配置：开发（npm run dev）、生产（npm run build）和单元测试（npm run test）。。。

吐槽完。

1.打开config/index.js，修改build里面的env文件名为根据环境变量获取，
修改完大概是下面这样子：

module.exports = {
  build: {
    env: require('./'+(process.env.VUE_CONFIG||'prod')+'.env'),
    //......

2.在config目录里面把prod.env.js复制两份，分别是uat.env.js、testing.env.js

3.修改dev.env.js、uat.env.js、testing.env.js、prod.env.js这四个文件，在大括号里面添加API: '"/api或uat或其他什么"',如下：

module.exports = {
  NODE_ENV: '"production"',
  API: '"/api"'
}

4.然后就可以在任何地方通过process.env.API访问到这个变量了。

5.打包的时候，先设置环境变量VUE_CONFIG，例如export VUE_CONFIG=uat && npm run build。

Answer 2

https://stackoverflow.com/que...

Answer 3

https://github.com/tonyljl526...
可以看下这个项目的脚手架，基于express和vue2、webpack的。能实现你的需求,主要看config/renderConfig.js