vue-cli3打包项目不同环境:开发环境、生产环境、测试环境

简介: vue-cli3打包项目不同环境:开发环境、生产环境、测试环境

package.json


{
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-alpha": "vue-cli-service build --mode=alpha"
  }
}

开发环境:

# 默认:process.env.NODE_ENV=development
$ vue-cli-service serve

.evn.development


NODE_ENV='development'
VUE_APP_MODE = 'development'
VUE_APP_BASE_URL = 'https://development.demo.com'

生产环境:

# 默认:process.env.NODE_ENV=production
$ vue-cli-service build

.env.production


NODE_ENV='production'
VUE_APP_MODE = 'production'
VUE_APP_BASE_URL = 'https://production.demo.com'

测试环境:

$ vue-cli-service build --mode alpha

.env.alpha


NODE_ENV='production'
VUE_APP_MODE = 'alpha'
VUE_APP_BASE_URL = 'http://development.demo.com'

mode后面添加test、production 等预留参数无效


用户自定义的变量需要以 VUE_APP_ 前缀开头,才能在代码中访问到变量


console.log(process.env.VUE_APP_MODE)

使用参数

const BASE_URL = process.env.VUE_APP_BASE_URL

相关文章
|
22天前
|
存储 JavaScript
解锁Vuex高级玩法:模块化与插件共舞,让你的Vue项目状态管理如虎添翼!
【8月更文挑战第27天】Vuex是一款专为Vue.js应用程序设计的状态管理模式及库,它通过集中管理组件状态来确保状态变更的可预测性。在大型应用中,采用模块化管理可以让代码结构更加清晰,同时利用插件增强功能。模块化管理允许将store拆分为包含各自state、mutations、actions和getters的独立模块。插件则能监听状态变化,实现诸如日志记录或数据持久化等功能。本文通过具体示例介绍了如何在Vuex中实现模块化管理和插件的高级应用。
34 1
|
8天前
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
205 58
|
4天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
6天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
12天前
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
42 11
|
29天前
|
JavaScript
Vue项目如何生成树形目录结构
这篇文章介绍了如何在Vue项目中生成树形目录结构,通过安装并使用`mddir`命令行工具来创建一个`directoryList.md`文件,从而快速获取项目的树形目录列表。
Vue项目如何生成树形目录结构
|
21天前
|
jenkins 测试技术 持续交付
解锁.NET项目高效秘籍:从理论迷雾到实践巅峰,持续集成与自动化测试如何悄然改变游戏规则?
【8月更文挑战第28天】在软件开发领域,持续集成(CI)与自动化测试已成为提升效率和质量的关键工具。尤其在.NET项目中,二者的结合能显著提高开发速度并保证软件稳定性。本文将从理论到实践,详细介绍CI与自动化测试的重要性,并以ASP.NET Core Web API项目为例,演示如何使用Jenkins和NUnit实现自动化构建与测试。每次代码提交后,Jenkins自动触发构建流程,通过编译和运行NUnit测试确保代码质量。这种方式不仅节省了时间,还能快速发现并解决问题,推动.NET项目开发迈向更高水平。
34 8
|
20天前
|
JavaScript
Vue3相关组件项目依赖依赖版本信息
这篇文章展示了一个Vue 3项目中使用的组件和库的依赖版本信息,包括`ant-design-vue`、`swiper`、`vue`、`vue-router`等,以及开发依赖如`vite`、`vue-tsc`、`eslint`等。
Vue3相关组件项目依赖依赖版本信息
|
27天前
|
存储 SQL 测试技术
单元测试问题之JCode5插件在项目中的实际应用效果如何解决
单元测试问题之JCode5插件在项目中的实际应用效果如何解决
36 3
|
27天前
|
测试技术 数据安全/隐私保护 iOS开发
iOS自动化测试方案(四):保姆级搭建iOS自动化开发环境
iOS自动化测试方案的第四部分,涵盖了基础环境准备、iPhone虚拟机设置、MacOS虚拟机与iPhone真机的连接,以及扩展问题和代码示例,确保读者能够顺利完成环境搭建并进行iOS自动化测试。
56 0
iOS自动化测试方案(四):保姆级搭建iOS自动化开发环境