vue:不同环境配置不同的打包命令

gyl_coder 发布于2019-08-23 16:47 / 2507人阅读

摘要：最近做的一个项目是配置了三个环境的正式环境测试环境和开发环境，下面以这个为例第一步安装或者在中加上进行安装依赖这是我项目的目录第二步修改各环境下的参数在目录下添加。

最近做的一个项目是配置了三个环境的：正式环境、测试环境和开发环境，下面以这个为例

第一步：安装cross-env

npm i --save-dev cross-env
或者在
package.json中加上"cross-env": "^5.0.1"进行安装依赖

package.json:

//这是我项目的目录

第二步：修改各环境下的参数

在config/目录下添加test.env.js、develop.env.js。并且修改文件里的内容
config/prod.env.js

config/develop.env.js

第三步：更改build文件夹的东西

1.给build文件夹下增加环境文件 webpack.develop.conf.js

2.修改build.js
默认打包都是prod环境，我这里改成了默认是测试环境
打印是什么环境

3.修改webpack.prod.conf.js

4.修改webpack.base.conf.js
由于config/index.js配置不同的环境，静态文件取得是不同的目录，所以这边要根据不同的环境取出不同的配置，如果配置一样，那就无需区分了

config/index.js
config/index.js dev运行

config/index.js 开发环境配置

config/index.js 测试环境配置

config/index.js 正式环境配置

第四步：输入不同的命令打包环境

"build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",

"build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",

"build--develop": "cross-env NODE_ENV=develop env_config=develop node build/build.js"

测试环境打包： npm run build--test

正式环境打包： npm run build--prod

开发环境打包： npm run build--develop

云服务器 GPU云服务器不同的站点，有配置文档不同域名的辨别不同的域名后缀不同域名的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103284.html

vue-cli3 配置开发-测试环境

摘要：实现输入一行命令，执行两条指令，分别打包线上生产环境和线上测试环境的代码。这样配置好之后，只要执行，它会自动先执行正式环境构建打包，完成之后再自动执行测试环境的构建打包，是方便接着再配置自动压缩，这里就需要使用到一个的插件。需求首先介绍一下本项目的背景，是基于 vue-cli3.1.1 的单页应用，目前测试环境和生产环境都在线上，并且都在同一个域名下，其中生产环境部署在根目录下，测...

Scott 2019-08-26 13:48 评论0 收藏0
vue实现分环境打包步骤（给不同的环境配置相对应的打包命令）

在新建好的项目中，一般执行npm run build就是打包了，但此时只能打包到一个环境，不同环境需要配置不同的地址，可以手动更改接口的地址，也可以自行配置命令而不需要每次打包进行地址切换，步骤如下：文件结构如下图： showImg(https://segmentfault.com/img/bVbtsAE?w=255&h=536); 1）在config文件内新建test.env.js文件： u...

idealcn 2019-08-23 17:56 评论0 收藏0
基于Vue-cli的一套代码支持多个项目的解决方案

摘要：基于的一套代码支持多个项目的解决方案应用场景在端业务中，同样的产品，客户多多少少会要求一些定制化。那么，是否可以一套代码支持多个项目呢前段时间，接了一个需求，技术选型是，用搭建的。在这个场景下研究了一下解决方案。基于Vue-cli的一套代码支持多个项目的解决方案应用场景在toB端业务中，同样的产品，客户多多少少会要求一些定制化。从皮肤，图片，到一些小的功能的差异。前端总是冲在最前...

SQC 2019-08-22 18:22 评论0 收藏0
面试官：自己搭建过vue开发环境吗？

摘要：在搭建过程中，还是会踩很多坑的。如果还不熟悉的话，建议自己搭建一次。开篇原文地址：www.ccode.live/lentoo/list… 前段时间，看到群里一些小伙伴面试的时候被面试官问到这类题目。平时大家开发vue项目的时候，相信大部分人都是使用 vue-cli脚手架生成的项目架构，然后 npm run install 安装依赖，npm run serve启动项目然后就开始写业务代码...

HelKyle 2019-05-22 15:27 评论0 收藏0
基于webpack模仿vue-cli（简略版）工程化

摘要：但高度封装的带来方便的同时，很多人却很少去关注轮子的内部结构，以至于当使用需要手动配置一些东西如编译实现代码压缩，移动端适配等配置的时候往往无从下手。废话不多说，下面我们来看看如何基于模仿实现项目工程化。从零搭建vue-cli 原创不易，如需转载请联系作者并注明出处 vue-cli的出现为vue工程化前端开发工作流提供了开箱即用的构建配置，减轻了烦人的webpack配置流程。但高度封...

GitCafe 2019-08-26 11:35 评论0 收藏0