落ち着いてゆっくり見てください
まず、プロジェクトをビルドする必要
があります。依存関係パッケージは自動的にダウンロードされ、npmiを所有する必要はありません。
.envは、どの環境に関係なくロードされます
。env.production実稼働環境が
ロードされます。env.developmentテスト開発環境がロードされます。
以下の例は個別に記述されており、.env.production.env.developmentのみを使用し
ます。プロジェクトのルートディレクトリに.env.productionファイルとして2つの新しいファイルを作成します。env.developmentファイルは
ファイル内にあり、以下
を。で構成します。 envファイル
VUE_APP_NAME='vue测试名称'
.env.developmentファイル：
NODE_ENV = development
VUE_APP_URL = 'developmentURL' //自定义变量 必须要以VUE_APP_开头定义
.env.productionファイル：
NODE_ENV = production
VUE_APP_URL = 'productionURL' //自定义变量 必须要以VUE_APP_开头定义
次に、package.jsonを構成する必要があります
{
"name": "my",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
//打包测试开发版本
//--mode 后面需要对用文件的名字.env.development 重点是要和.env.后面的名字对应起来
"build-development": "vue-cli-service build --mode development",
//打包生产版本
//--mode 后面需要对用文件的名字.env.production 重点是要和.env.后面的名字对应起来
"build-production": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
...//json文件太长 后面的没用复制过来 主要看上面的scripts
}
次に、app.vueで設定したVUE_APP_URLを出力します
mounted() {
console.log(process.env,'process.env')
console.log(process.env.VUE_APP_URL, "VUE_APP_URL");
}
npm run
serviceをローカルで実行すると、 .envと.env.developmentの2つのファイルが読み込まれます。
コンソールの印刷が表示されます。process.env
がグローバルオブジェクトであることがわかります。必要なプロパティをに追加できます。オブジェクトと
実行npmrunサーブすると、開発バージョンが自動的にコンパイルおよびテストされるため、 .env.developmentファイルに変数を追加できます。製品バージョンをパッケージ化しようとします。
npm run build-production
distフォルダはファイルのルートディレクトリに生成されます
ローカルでdistを開いて、vueパッケージファイルを実行しようとします
http-servernpmパッケージをグローバルにインストールする必要があります
npm i -g http-server
distフォルダーに移動し、cmdを開いて
http-serverを実行します
ブラウザで開いて、コンソールの印刷を確認します
これは確かにapp.vueで出力した変数であり、値は.envと.env.productionで設定した値です。
これにより、テストURLと本番URLを毎回パッケージ化する必要がなく、パッケージ化プロセスが大幅に容易になります。time Switched〜
このVUE_APP_URLをaxiosにカプセル化して、開発をより便利にすることができます〜