Vue3 Vue CLI-Konfiguration für mehrere Umgebungen

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

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

{
  "Name": "Webseite",
  "version": "0.1.0",
  "privat": wahr,
  "Skripte": {
    "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",
    "Fussel": "Vue-CLI-Service-Fussel"
  },
  "Abhängigkeiten": {
    "@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"
  },
  "devAbhängigkeiten": {
    "@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",
    "Typoskript": "~4.1.5"
  }
}

Konsole.log('Umgebung',Prozess.Umgebung.NODE_ENV);
Konsole.log('Server',Prozess.Umgebung.VUE_APP_SERVER);

importiere {createApp} aus „vue“;
importiere Antd von „Ant-Design-Vue“;
App aus „./App.vue“ importieren;
importiere „ant-design-vue/dist/antd.css“;
Router aus „./router“ importieren;
Store aus „./store“ importieren;
importiere Axios von „Axios“;
axios.defaults.baseURL=Prozess.Umgebung.VUE_APP_SERVER;

//Der Vorteil ist, dass es einfach zu entwickeln ist, aber der Nachteil ist, dass die Datei beim Verpacken größer wird (aber das hat keine Auswirkungen)
createApp(App).verwenden(speichern).verwenden(Router).verwenden(Antd).mount('#app')

console.log('Umgebung', Prozess.Umgebung.NODE_ENV);
Konsole.log('Server', Prozess.Umgebung.VUE_APP_SERVER);

<Vorlage>
  <a-Layout>
    `<a-layout-sider width="200" style="Hintergrund: #fff">
      <a-Menü
          Modus="inline"
          v-Modell:selectedKeys="selectedKeys2"
          v-Modell:openKeys="openKeys"
          :Stil="{ Höhe: '100%', Rahmen rechts: 0 }"
      >
        <a-sub-menu key="sub1">
          <Vorlage #Titel>
                <span>
                  <Benutzer-umrissen />
                  Unternavigation 1
                </span>
          </Vorlage>
          <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-Untermenü>
        <a-sub-menu key="sub2">
          <Vorlage #Titel>
                <span>
                  <laptop-umrissen />
                  Unternavigation 2
                </span>
          </Vorlage>
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option6</a-menu-item>
          <a-menu-item key="7">Option 7</a-menu-item>
          <a-menu-item key="8">Option8</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub3">
          <Vorlage #Titel>
                <span>
                  <Benachrichtigung-umrissen />
                  Unternavigation 3
                </span>
          </Vorlage>
          <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-Untermenü>
      </a-Menü>
  </a-layout-sider>
    `
    <a-list item-layout="vertikal" Größe="groß"
            :grid="{ gutter: 16, column: 3 }" :data-source="ebooks1">
      <template #renderItem="{ item }">
        <a-list-item key="Artikelname">
          <Vorlage #Aktionen>
          <span v-for="{ Typ, Text } in Aktionen" :key="Typ">
            <Komponente v-bind:is="Typ" style="margin-right: 8px"/>
            {{ text }}
          </span>
          </Vorlage>
          <a-list-item-meta :description="Artikel.Beschreibung">
            <Vorlage #Titel>
              <a :href="item.href" rel="externes nofollow" >{{ item.name }}</a>
            </Vorlage>
            <Vorlage #avatar><a-avatar :src="item.cover" /></Vorlage>
          </a-list-item-meta>
        </a-Listenelement>
      </Vorlage>
    </a-Liste>
  </a-layout>
</Vorlage>

<script lang="ts">
importiere {defineComponent, onMounted, reactive, ref, toRef} aus „vue“;
importiere Axios von „Axios“;
importiere {LikeOutlined, MessageOutlined, StarOutlined} aus '@ant-design/icons-vue';

const listData: Datensatz<Zeichenfolge, Zeichenfolge>[] = [];

exportiere StandarddefiniereKomponente({
  Komponenten:
    SternUmrissen,
    Wie umrissen,
    MessageOutlined,
  },
  Name: "Home",
  aufstellen(){
    const pagination = {
      beiÄnderung: (Seite: Nummer) => {
        console.log(Seite);
      },
      Seitengröße: 3,
    };
    Konstante Aktionen: Datensatz<Zeichenfolge, Zeichenfolge>[] = [
      { Typ: 'StarOutlined', Text: '156' },
      { Typ: 'LikeOutlined', Text: '156' },
      { Typ: 'MessageOutlined', Text: '2' },
    ];
    console.log('einrichten');
    //Verwenden Sie ref zur Datenbindung const ebooks=ref();
    // Reaktive Datenbindung verwenden const ebooks1 = reactive({books:[]})
    beim Montieren(()=>{
      axios.get("/ebook/list?name=").then(response => {
        console.log("beiMounted");
        const Daten = Antwort.Daten;
        ebooks.Wert = Daten.Inhalt;
        ebooks1.books = Daten.Inhalt;
        console.log(Antwort);
      })
    })
    zurückkehren {
      Pagination,
      Aktionen,
      ebooks1: E-Books,
      ebooks2: toRef(ebooks1, "Bücher")
    }

  }
});
</Skript>
<Stilbereich>
.ant-layout-sider {
  schweben: links;
}

.ant-avatar {
  Breite: 50px;
  Höhe: 50px;
  Zeilenhöhe: 50px;
  Randradius: 8 %;
  Rand: 5px 0;
}
</Stil>