简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Wie erstellt vue-cli unterschiedliche Schnittstellencodes für unterschiedliche Back-End-Schnittstellenserver?
高洛峰
高洛峰 2017-07-05 10:40:33
0
3
1000

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?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

Antworte allen (3)
刘奇
刘奇2017-07-05 10:42:33 3 Etage

琢磨了几天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。

Wie+0
Antwort hinzufügen
    女神的闺蜜爱上我
    女神的闺蜜爱上我2017-07-05 10:42:33 2 Etage

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

    Wie+0
    Antwort hinzufügen
      迷茫
      迷茫2017-07-05 10:42:33 1 Etage

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

      Wie+0
      Antwort hinzufügen
        Beliebte Themen
        Mehr>
        Populäre Artikel
        Beliebte Tutorials
        Mehr>
        Verwandte Tutorials
        Beliebte Empfehlungen
        Aktuelle Kurse
        Neueste Downloads
        Mehr>
        Web-Effekte
        Quellcode der Website
        Website-Materialien
        Frontend-Vorlage
        Über uns Haftungsausschluss Sitemap
        Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！