• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Vue3之 Vue CLI多环境配置

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、前言

这里相对于之前就没那么麻烦了,通俗点说就是使用配置文件来管理多环境,实现环境的切换。

二、实现切换

1、增加开发和生产配置文件

在web的根目录下,创建开发环境切换配置文件.env.dev,内容如下:

NODE_ENV=development
VUE_APP_SERVER=http://127.0.0.1:8880

在web的根目录下,创建线上环境切换配置文件.env.prod,内容如下:

NODE_ENV=production
VUE_APP_SERVER=https://www.baidu.com

2、修改编译和启动支持多环境

package.json中修改,就是吧原来的server做下调整,

示例代码如下:

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve-dev": "vue-cli-service serve --mode dev --port 8080",
    "serve-prod": "vue-cli-service serve --mode prod",
    "build-dev": "vue-cli-service build --mode dev",
    "build-prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@ant-design/icons-vue": "^5.1.9",
    "ant-design-vue": "^2.0.0-rc.3",
    "axios": "^0.21.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "typescript": "~4.1.5"
  }
}

点击右侧npm中的刷新按钮,查看效果如下:

为了看到效果,我们在main.ts添加输出日志代码,以便验证是否修改成功,

添加代码如下:

console.log('环境',process.env.NODE_ENV);
console.log('服务端',process.env.VUE_APP_SERVER);


知识点:

  • NODE_ENV为配置文件对应的NODE_ENV变量
  • VUE_APP_SERVER为配置文件对应的VUE_APP_SERVER变量

重新编译,启动服务,结果如下图:

3、修改axios请求地址支持多环境

为什么要修改?

因为一个系统不可能只有一个请求,再者每个请求都写全路径,这会使代码的维护成本很大,所以,这里我们采用统一的配置去维护会相对好些。

因为是全局的,所以只要在main.ts中修改即可,引用axios,并设置默认访问路径,

示例代码如下:

import {createApp} from 'vue';
import Antd from 'ant-design-vue';
import App from './App.vue';
import 'ant-design-vue/dist/antd.css';
import router from './router';
import store from './store';
import axios from 'axios';
axios.defaults.baseURL=process.env.VUE_APP_SERVER;

//优点就是方便开发,缺点就是打包的时候会使文件较大(但并影响什么)
createApp(App).use(store).use(router).use(Antd).mount('#app')

console.log('环境', process.env.NODE_ENV);
console.log('服务端', process.env.VUE_APP_SERVER);


然后,我们在home修改axios的请求地址,只剩路径即可,

示例代码如下:

<template>
  <a-layout>
    `<a-layout-sider width="200" style="background: #fff">
      <a-menu
          mode="inline"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ height: '100%', borderRight: 0 }"
      >
        <a-sub-menu key="sub1">
          <template #title>
                <span>
                  <user-outlined />
                  subnav 1
                </span>
          </template>
          <a-menu-item key="1">option1</a-menu-item>
          <a-menu-item key="2">option2</a-menu-item>
          <a-menu-item key="3">option3</a-menu-item>
          <a-menu-item key="4">option4</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
                <span>
                  <laptop-outlined />
                  subnav 2
                </span>
          </template>
          <a-menu-item key="5">option5</a-menu-item>
          <a-menu-item key="6">option6</a-menu-item>
          <a-menu-item key="7">option7</a-menu-item>
          <a-menu-item key="8">option8</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
                <span>
                  <notification-outlined />
                  subnav 3
                </span>
          </template>
          <a-menu-item key="9">option9</a-menu-item>
          <a-menu-item key="10">option10</a-menu-item>
          <a-menu-item key="11">option11</a-menu-item>
          <a-menu-item key="12">option12</a-menu-item>
        </a-sub-menu>
      </a-menu>
  </a-layout-sider>
    `
    <a-list item-layout="vertical" size="large"
            :grid="{ gutter: 16, column: 3 }" :data-source="ebooks1">
      <template #renderItem="{ item }">
        <a-list-item key="item.name">
          <template #actions>
          <span v-for="{ type, text } in actions" :key="type">
            <component v-bind:is="type" style="margin-right: 8px"/>
            {{ text }}
          </span>
          </template>
          <a-list-item-meta :description="item.description">
            <template #title>
              <a :href="item.href" rel="external nofollow" >{{ item.name }}</a>
            </template>
            <template #avatar><a-avatar :src="item.cover" /></template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </a-layout>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, ref, toRef} from 'vue';
import axios from 'axios';
import {LikeOutlined, MessageOutlined, StarOutlined} from '@ant-design/icons-vue';

const listData: Record<string, string>[] = [];

export default defineComponent({
  components: {
    StarOutlined,
    LikeOutlined,
    MessageOutlined,
  },
  name: 'Home',
  setup(){
    const pagination = {
      onChange: (page: number) => {
        console.log(page);
      },
      pageSize: 3,
    };
    const actions: Record<string, string>[] = [
      { type: 'StarOutlined', text: '156' },
      { type: 'LikeOutlined', text: '156' },
      { type: 'MessageOutlined', text: '2' },
    ];
    console.log('set up');
    //使用ref进行数据绑定
    const ebooks=ref();
    // 使用reactive进行数据绑定
    const ebooks1=reactive({books:[]})
    onMounted(()=>{
      axios.get("/ebook/list?name=").then(response => {
        console.log("onMounted");
        const data = response.data;
        ebooks.value = data.content;
        ebooks1.books = data.content;
        console.log(response);
      })
    })
    return {
      pagination,
      actions,
      ebooks1: ebooks,
      ebooks2: toRef(ebooks1, "books")
    }

  }
});
</script>
<style scoped>
.ant-layout-sider {
  float: left;
}

.ant-avatar {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 8%;
  margin: 5px 0;
}
</style>

我们再次重新编译启动,查看结果如下:

由红圈处查看,证明修改axios请求地址,实现全局配置维护成功。

知识点:

  • 多环境配置文件要放在web根目录下
  • .env.xxx,后缀xxx和package.json里的指令的–mode xxx对应
  • 增加–port参数来修改启动端口
  • 自定义变量必须以VUE_APP_开头
  • 通过设置axios.defaults.baseURL,来统一设置后端的IP端口或域名

到此这篇关于Vue3之 Vue CLI多环境配置的文章就介绍到这了,更多相关Vue CLI多环境配置内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue3 列表界面数据展示详情发布时间:2022-02-05
下一篇:
Node中使用http-proxy-middleware实现代理跨域的方法步骤发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap