How to set packaging commands based on different environments of vue project

vue project sets different environment packaging commands

Installation dependenciescross-env

npm install --save-dev cross-env

File default

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

Set packaging commands for different environments

  "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"
  },

Define different environment variables
Create a new file under the project.and.

.document

#Define NODE_ENV variableNODE_ENV=prod

.document

#Define NODE_ENV variableNODE_ENV=test

Configuration

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

const { NODE_ENV } = ;

///Get the native ip///function getIPAdress() {
  const interfaces = ();
  for (let devName in interfaces) {
    let iface = interfaces[devName];
    for (let i = 0; i &lt; ; i++) {
      let alias = iface[i];
      if (
         === "IPv4" &amp;&amp;
         !== "127.0.0.1" &amp;&amp;
        !
      ) {
        return ;
      }
    }
  }
}
const myHost = getIPAdress();
("myHost", myHost);
 = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: myHost, //Configure local host, automatically open in the browser when the project is started  },
  outputDir: NODE_ENV ? `${NODE_ENV}-dist` : "dist",// Different environments package and output to different directories});

Implementation effect

#Execute the command, and the packaged file is output directly to the dist directory under the projectnpm run build 

#Execute the command, and the packaged file is output directly to the test-dist directory under the projectnpm run build:test 

#Execute the command, and the packaged file is output directly to the prod-dist directory under the projectnpm run build :prod

#Start the command, and the local IP page with port number 9090 will be automatically opened in the browser.npm run dev

vue-cli-service

vue-cli-service serve

Execute the commandvue-cli-service serveA service will be started (based on webpack-dev-server) and comes with module hot reload (Hot-Module-Replacement).

grammar

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

options

–open: Open the browser when the server starts
–copy: Copy URL to cut version when server starts
–mode: Specify the environment mode (default: development)
–host: Specify host (default: 0.0.0.0)
–post: Specify port (default: 8080)
–https: Use https (default: false)

Instructions for use:

When using –open, the default host is 0.0.0.0. If you open it automatically, you will not see the effect. Therefore, when setting the automatic startup, you also need to configure the host as localhost at the same time. If you need to set the IP of your own computer, you need to obtain the local IP. Write it later.

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

Run the vue project, set vue-cli-service serve --open to automatically open the browser, and jump to http://0.0.0.0:8081 Solution

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

document

const os = require("os");

const { NODE_ENV } = ;

///Get the native ipfunction getIPAdress() {
  const interfaces = ();
  for (let devName in interfaces) {
    let iface = interfaces[devName];
    for (let i = 0; i &lt; ; i++) {
      let alias = iface[i];
      if (
         === "IPv4" &amp;&amp;
         !== "127.0.0.1" &amp;&amp;
        !
      ) {
        return ;
      }
    }
  }
}
const myHost = getIPAdress();//Native IP

 = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: myHost, //Configure local host, automatically open in the browser when the project is started  },
  outputDir: NODE_ENV ? `${NODE_ENV}-dist` : "dist",
});

vue-cli-service build

describe:
Brief description of function: packaging.

vue-cli-service build generates a package that can be used in the dist/ directory.

Packaging features

Compress JS/CSS/HTML
Automatic vendor chunk splitting. This allows for better caching.
chunk manifest will be inlined in HTML.

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

options

–mode: Specify the environment mode (default: production)
–dest: Specify the output directory (default: dist)
–modern: Build applications using modern mode, deliver natively supported ES2015 code to modern browsers, and generate a package compatible with old browsers for automatic fallback.
–target:app | lib | wc | wc-async (default: app). Allows you to build any component in your project as a library or Web Components component.
–name: Name in library or Web Components mode (default: the "name" field or entry file name in)
--no-clean: Do not clear the contents of the target directory before building the project
–report: Generate to help analyze package content
–report-json: Generate to help analyze package content. For example: the size of the modules contained in the package.
–watch: Listen to file changes

This is the article about setting package commands for vue projects based on different environments. For more information about vue packaging commands for different environments, please search for my previous articles or continue browsing the following related articles. I hope everyone will support me in the future!