安装依赖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"
},设置不同环境的打包命令
"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"
},定义不同环境变量
在项目下新建文件.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",//不同的环境打包输出到不同的目录
});实施效果
#执行命令，打包的文件直接输出到项目下的dist目录 npm run build #执行命令，打包的文件直接输出到项目下的test-dist目录 npm run build:test #执行命令，打包的文件直接输出到项目下的prod-dist目录 npm run build :prod #启动命令，会自动在浏览器中打开端口号为9090的本地ip的页面 npm run dev
vue-cli-service serve
执行命令vue-cli-service serve会启动一个服务， (基于 webpack-dev-server) 并附带模块热重载 (Hot-Module-Replacement)。
语法
vue-cli-service serve [options] [entry]
options
使用说明：
使用–open时，默认的host是0.0.0.0，自动打开会看不到效果，因此当设置自动启动时还需要同时配置host为localhost,如果需要设置本地自己电脑的ip，需另外获取本地ip.后续再写。
"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/ 目录生成一个可用于生产环境的包。
打包的特点
vue-cli-service build [options] [entry|pattern]
options
