vue項目根據(jù)不同環(huán)境進行設置打包命令的方法

更新時間：2022年11月17日 10:02:56 作者：HaanLen

這篇文章主要介紹了vue項目根據(jù)不同環(huán)境進行設置打包命令,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

vue項目設置不同環(huán)境打包命令

安裝依賴cross-env

npm install --save-dev cross-env

package.json文件默認

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

設置不同環(huán)境的打包命令

  "scripts": {
    "dev": "vue-cli-service serve --open --port 9090",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "build:prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },

定義不同環(huán)境變量
在項目下新建文件.env.prod 和.env.test

.env.prod文件

#定義NODE_ENV變量
NODE_ENV=prod

.env.test文件

#定義NODE_ENV變量
NODE_ENV=test

vue.config.js配置

const { defineConfig } = require("@vue/cli-service");
const os = require("os");

const { NODE_ENV } = process.env;

///獲取本機ip///
function getIPAdress() {
  const interfaces = os.networkInterfaces();
  for (let devName in interfaces) {
    let iface = interfaces[devName];
    for (let i = 0; i < iface.length; i++) {
      let alias = iface[i];
      if (
        alias.family === "IPv4" &&
        alias.address !== "127.0.0.1" &&
        !alias.internal
      ) {
        return alias.address;
      }
    }
  }
}
const myHost = getIPAdress();
console.log("myHost", myHost);
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: myHost, //配置本地host,當啟動項目時自動在瀏覽器中打開
  },
  outputDir: NODE_ENV ? `${NODE_ENV}-dist` : "dist",//不同的環(huán)境打包輸出到不同的目錄
});

實施效果

#執(zhí)行命令，打包的文件直接輸出到項目下的dist目錄
npm run build 

#執(zhí)行命令，打包的文件直接輸出到項目下的test-dist目錄
npm run build:test 

#執(zhí)行命令，打包的文件直接輸出到項目下的prod-dist目錄
npm run build :prod

#啟動命令，會自動在瀏覽器中打開端口號為9090的本地ip的頁面
npm run dev

vue-cli-service

vue-cli-service serve

執(zhí)行命令vue-cli-service serve會啟動一個服務， (基于 webpack-dev-server) 并附帶模塊熱重載 (Hot-Module-Replacement)。

語法

vue-cli-service serve [options] [entry]

options

–open: 在服務器啟動時打開瀏覽器
–copy: 在服務器啟動時將 URL 復制到剪切版
–mode: 指定環(huán)境模式 (默認值：development)
–host: 指定 host (默認值：0.0.0.0)
–post: 指定 port (默認值：8080)
–https: 使用 https (默認值：false)

使用說明：

使用–open時，默認的host是0.0.0.0，自動打開會看不到效果，因此當設置自動啟動時還需要同時配置host為localhost,如果需要設置本地自己電腦的ip，需另外獲取本地ip.后續(xù)再寫。

 "dev": "vue-cli-service serve --open --host localhost",

運行vue項目，設置vue-cli-service serve --open自動打開瀏覽器，跳轉到http://0.0.0.0:8081 解決辦法

"dev": "vue-cli-service serve --open --port 9090",

vue.config.js文件

const os = require("os");

const { NODE_ENV } = process.env;

///獲取本機ip
function getIPAdress() {
  const interfaces = os.networkInterfaces();
  for (let devName in interfaces) {
    let iface = interfaces[devName];
    for (let i = 0; i < iface.length; i++) {
      let alias = iface[i];
      if (
        alias.family === "IPv4" &&
        alias.address !== "127.0.0.1" &&
        !alias.internal
      ) {
        return alias.address;
      }
    }
  }
}
const myHost = getIPAdress();//本機ip


module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: myHost, //配置本地host,當啟動項目時自動在瀏覽器中打開
  },
  outputDir: NODE_ENV ? `${NODE_ENV}-dist` : "dist",
});

vue-cli-service build

描述：
作用簡述：打包。

vue-cli-service build 會在 dist/ 目錄生成一個可用于生產環(huán)境的包。

打包的特點

壓縮JS/CSS/HTML
自動的 vendor chunk splitting。這樣可以更好地緩存。
chunk manifest 會內聯(lián)在 HTML 里。

vue-cli-service build [options] [entry|pattern]

options

–mode:指定環(huán)境模式 (默認值：production)
–dest:指定輸出目錄 (默認值：dist)
–modern:使用現(xiàn)代模式構建應用，為現(xiàn)代瀏覽器交付原生支持的 ES2015 代碼，并生成一個兼容老瀏覽器的包用來自動回退。
–target:app | lib | wc | wc-async (默認值：app).允許你將項目中的任何組件以一個庫或 Web Components 組件的方式進行構建。
–name:庫或 Web Components 模式下的名字 (默認值：package.json 中的 “name” 字段或入口文件名)
–no-clean:在構建項目之前不清除目標目錄的內容
–report:生成 report.html 以幫助分析包內容
–report-json:生成 report.json 以幫助分析包內容。例如：包中包含的模塊們的大小。
–watch:監(jiān)聽文件變化

到此這篇關于vue項目根據(jù)不同環(huán)境進行設置打包命令的文章就介紹到這了,更多相關vue不同環(huán)境打包命令內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Tree 組件搜索過濾功能實現(xiàn)干貨
這篇文章主要為大家介紹了 Tree組件搜索過濾功能實現(xiàn)干貨詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
vue3中的 $attrs 與 Attributes 繼承
這篇文章主要介紹了vue3中的 $attrs 與 Attributes 繼承的相關資料,首先介紹了什么是Attributes 繼承,結合實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-02-02
vue3中hooks的概述及用法小結
這篇文章是介紹一下vue3中的hooks以及它的用法，主要圍繞兩點來介紹，一個是hooks基本概念，另一個是vue3中hooks的使用方法，本文結合實例代碼給大家講解的非常詳細，需要的朋友參考下吧
2023-03-03
vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法
今天小編就為大家分享一篇vue動態(tài)刪除從數(shù)據(jù)庫倒入列表的某一條方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
分享一個精簡的vue.js 圖片lazyload插件實例
本篇文章主要介紹了分享一個精簡的vue.js 圖片lazyload插件實例。非常具有實用價值，需要的朋友可以參考下。
2017-03-03
查看vue版本號以及vue/cli腳手架版本號方式
這篇文章主要介紹了查看vue版本號以及vue/cli腳手架版本號方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue中el-autocomplete與el-select的異同
本文主要介紹了vue中el-autocomplete與el-select的異同，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-05-05
詳解如何在Vue中進行表單自定義驗證
在Vue應用中,表單驗證是非常重要的一部分,Vue提供了一些內置的驗證規(guī)則,比如required、min、max等,但是有時候我們需要對表單進行自定義驗證,以滿足特定的業(yè)務需求,本文將介紹如何在Vue中進行表單自定義驗證,感興趣的朋友可以參考下
2023-12-12
詳解vue 單頁應用（spa）前端路由實現(xiàn)原理
這篇文章主要介紹了詳解vue 單頁應用（spa）前端路由實現(xiàn)原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
VScode格式化ESlint方法(最全最好用方法)
這篇文章主要介紹了VScode格式化ESlint方法(最全最好用方法),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-09-09