Tunjukkan kepada anda cara melihat persekitaran vue

Dengan perkembangan pesat teknologi bahagian hadapan, Vue telah menjadi salah satu rangka kerja bahagian hadapan arus perdana. Apabila menggunakan Vue untuk pembangunan projek, adalah perlu untuk mengetahui cara melihat persekitaran Vue. Artikel ini akan menunjukkan kepada anda cara melihat persekitaran vue.

1 Lihat persekitaran Vue melalui baris arahan

Kami boleh melihat maklumat versi Vue dan maklumat konfigurasi berkaitan persekitaran semasa melalui baris arahan. Dalam versi Vue CLI 3.x, kita boleh menggunakan arahan berikut:

vue --version       // 查看Vue的版本信息
vue info            // 查看当前环境的配置信息

Selepas memasukkan arahan di atas, kita boleh melihat maklumat output yang berkaitan. Jika anda menggunakan versi yang lebih lama, sila rujuk dokumentasi rasmi untuk arahan yang sepadan.

2 Lihat fail konfigurasi projek Vue

Apabila projek Vue dimulakan, Vue akan menjana beberapa fail konfigurasi secara automatik. Kami boleh memahami maklumat konfigurasi yang berkaitan dengan persekitaran semasa dengan melihat fail konfigurasi ini.

1. package.json

package.json ialah sesuatu yang serupa dengan fail konfigurasi, yang menyimpan maklumat dan kebergantungan projek kami. Kami boleh menyemak maklumat versi Vue di dalam.

Dalam fail ini, kami boleh melihat maklumat berikut:

{
  "name": "my-vue-project",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "vue": "^2.6.11"
  }
}

Kami boleh melihat maklumat versi vue dalam atribut dependencies.

2. fail.env

Dalam versi Vue CLI 3.x, kami boleh mengkonfigurasi pembolehubah persekitaran dengan menambahkan fail .env. Dalam fail ini, kita boleh mengkonfigurasi pembolehubah persekitaran yang berbeza seperti persekitaran pembangunan, persekitaran ujian dan persekitaran pengeluaran.

Kami boleh menetapkan kandungan berikut dalam fail .env:

VUE_APP_TITLE=My Vue Project    // 设置一个环境变量

Dalam kod, kita boleh menggunakan pembolehubah persekitaran ini dengan cara berikut:

console.log(process.env.VUE_APP_TITLE);

3. Penyahpepijatan penyemak imbas dan melihat persekitaran Vue

Semasa membangunkan Vue, adalah perkara biasa bagi kita untuk menyahpepijat melalui penyemak imbas. Kami boleh memahami maklumat persekitaran Vue semasa dengan menggunakan alat pembangun penyemak imbas.

1. Pemalam Vue

Kami boleh menggunakan pemalam Vue untuk melihat maklumat persekitaran bagi tika Vue semasa. Pemalam Vue boleh memantau kitaran hayat tika Vue dan mengeluarkan maklumat yang berkaitan tentang tika itu.

Anda boleh menggunakan kaedah berikut untuk memperkenalkan pemalam Vue:

import Vue from 'vue';
import VueInfoPlugin from './plugins/vue-info';

Vue.use(VueInfoPlugin);

Selepas Vue disegerakan, kita boleh melihat maklumat output dalam konsol.

2. Alat Pembangun Vue

Vue menyediakan alatan pembangun rasmi yang boleh membantu kami nyahpepijat aplikasi Vue dalam penyemak imbas. Selepas membuka alatan pembangun, kami boleh melihat maklumat yang berkaitan tentang persekitaran Vue semasa di bawah tab Vue.

4. Ringkasan

Artikel ini memperkenalkan beberapa kaedah untuk memahami cara melihat persekitaran Vue. Kami boleh memahami maklumat yang berkaitan tentang persekitaran Vue semasa melalui baris arahan, fail konfigurasi dan penyahpepijatan penyemak imbas. Apabila kami perlu menyahpepijat dan mencari masalah, kaedah ini akan membantu kami mencari masalah dengan lebih cepat.

Atas ialah kandungan terperinci Tunjukkan kepada anda cara melihat persekitaran vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!