快捷導(dǎo)航

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

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

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

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

安裝依賴cross-env

npm install --save-dev cross-env

package.json文件默認(rèn)

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

設(shè)置不同環(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;

///獲取本機(jī)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,當(dāng)啟動項目時自動在瀏覽器中打開
  },
  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會啟動一個服務(wù)， (基于 webpack-dev-server) 并附帶模塊熱重載 (Hot-Module-Replacement)。

語法

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

options

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

使用說明：

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

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

運行vue項目，設(shè)置vue-cli-service serve --open自動打開瀏覽器，跳轉(zhuǎn)到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;

///獲取本機(jī)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();//本機(jī)ip


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

vue-cli-service build

描述：
作用簡述：打包。

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

打包的特點

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

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

options

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

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

您可能感興趣的文章: