美文网首页
VUE配置不同环境变量

VUE配置不同环境变量

作者: 雨落倾城夏微凉_e861 | 来源:发表于2020-07-19 17:01 被阅读0次

    在项目开发中我们经常会遇到对于一些公共的变量在开发环境和线上环境是不同的,就好比后台提供给我们的接口也是分测试和线上的。如果我们开发时写一套,然后到上线时再去修改容易出现很多遗漏导致很多没必要的bug。以VUE为例接下来我们来配置不同环境下的变量。

    项目创建

    我在本地创建了一个hello-world的项目

    vue create hello-world;
    cd hello-world
    npm run serve
    

    项目内容没必要做什么修改我们主要是配置一些文件

    创建配置文件

    在项目的根目录下我们创建两个文件
    .env.dev //用来配置开发环境变量
    .env.prod //用来配置线上环境变量

    .env.dev变量配置

    开发环境下的环境变量
    NODE_ENV = development
    VUE_APP_URL = https://www.development.com.cn //具体变量以实际项目为准

    .env.prod变量配置

    生产环境下的环境变量
    NODE_ENV = production
    VUE_APP_URL = https://www.production.com.cn //具体变量以实际项目为准
    如果变量较多自行添加,需要注意的是vue自定义变量时必须以"VUE_APP"开头才行。

    修改package.json文件中的scripts

    默认配置

     "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
      },
    

    我们添加几个命令

    "scripts": {
        "serve": "vue-cli-service serve",
        "serve:dev": "vue-cli-service serve --mode dev",
        "serve:prod": "vue-cli-service serve --mode prod",
        "build": "vue-cli-service build",
        "build:dev": "vue-cli-service build --mode dev",
        "build:prod": "vue-cli-service build --mode prod"
      },
    

    注意--mode后面的变量与文件.env.后面dev/prod相对应要一致
    为了看出效果我们在sec/main.js中加入输出

    //我们在 .env.dev/.env.prod 文件中配置的变量
    console.log("目前环境" + process.env.NODE_ENV);
    console.log("环境域名变量" + process.env.VUE_APP_URL);
    

    此时用我们配置的命令重启项目:

    npm run serve:dev
    
    1.png

    看到控制台输出我们配置的结果。

    再次重启项目:

    npm run serve:prod
    

    查看控制台


    2.png

    接下来我们运行打包后项目看看是否可行
    之前写过用下载serve直接运行打包后的项目,在这我们直接进行操作,打包项目:

    npm run build:dev
    

    根目录下生成dist文件,接着执行:

    serve dist//默认5000端口
    

    查看控制台


    3.png

    再次打包并执行:

    npm run build:prod
    serve dist
    

    查看控制台


    4.png

    到此我们就配置成功了。

    相关文章

      网友评论

          本文标题:VUE配置不同环境变量

          本文链接:https://www.haomeiwen.com/subject/epqrkktx.html