vue项目根据不同环境进行设置打包命令的方法
HaanLen 人气:0vue项目设置不同环境打包命令
安装依赖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
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; ///获取本机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/ 目录生成一个可用于生产环境的包。
打包的特点
- 压缩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:监听文件变化
加载全部内容