vue项目根据不同环境进行设置打包命令

vue项目设置不同环境打包命令

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///functiongetIPAdress(){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

vue-cli-service serve

执行命令

vue-cli-service serve

会启动一个服务， (基于 webpack-dev-server) 并附带模块热重载 (Hot-Module-Replacement)。

语法

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

options

• –open: 在服务器启动时打开浏览器
• –copy: 在服务器启动时将 URL 复制到剪切版
• –mode: 指定环境模式 (默认值：development)
• –host: 指定 host (默认值：0.0.0.0)
• –post: 指定 port (默认值：8080)
• –https: 使用 https (默认值：false)

使用说明：

使用–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;///获取本机ipfunctiongetIPAdress(){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/ 目录生成一个可用于生产环境的包。

打包的特点

• 压缩JS/CSS/HTML
• 自动的 vendor chunk splitting。这样可以更好地缓存。
• chunk manifest 会内联在 HTML 里。

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

options

• –mode:指定环境模式 (默认值：production)
• –dest:指定输出目录 (默认值：dist)
• –modern:使用现代模式构建应用，为现代浏览器交付原生支持的 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:监听文件变化