vue-cli3.0的项目上,配置多个环境

在vue-cli3.0的项目上,配置多个环境
一般情况下,我们会需要三个环境(本地开发环境、测试环境、生产环境),而3.0默认只支持两个环境(即测试环境、生产环境),如何配置多个环境,请往下看:

第一步

在此处建立额外的环境配置文件,一个文件一个环境,如我要配置test(测试环境)
在此处建立额外的环境配置文件,一个文件一个环境,如我要配置test(测试环境)
.evn.test内容

NODE_ENV = 'test'
第二步

在项目根目录添加 config.js文件(此文件是配置各环境的url)

let BASE_URL = ""; 
  • 2
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
Vue3.0Vue.js 的最新版本,它相较于 Vue2.x 版本有了很多的优化和改进,比如性能更好、更好的 TypeScript 支持、更好的组合 API 等等。下面是一个 Vue3.0 项目实战教程: ## 步骤一:创建项目 首先,我们需要创建一个基于 Vue3.0项目。可以使用 Vue CLI 工具创建项目,执行以下命令: ``` vue create my-project ``` 然后按照提示选择需要的配置即可。 ## 步骤二:编写代码 接下来,我们需要编写代码来完成我们的项目。在 Vue3.0 中,使用了 Composition API 来编写代码,相较于 Vue2.x 中的 Options API,它更具有灵活性和可重用性。 例如,在组件中,我们可以使用 `setup()` 函数来编写代码,它可以返回一个对象,包含组件的状态和行为。下面是一个示例: ```vue <template> <div> <h1>{{ message }}</h1> <button @click="count++">{{ count }}</button> </div> </template> <script> import { reactive } from 'vue' export default { setup() { const state = reactive({ message: 'Hello, Vue3.0!', count: 0 }) return state } } </script> ``` 在上面的代码中,我们使用 `reactive()` 函数来创建一个响应式的对象,然后在 `setup()` 函数中返回它,从而将其作为组件的状态。我们可以在模板中直接使用这些状态,从而更新视图。 除了状态之外,我们还可以在 `setup()` 函数中定义组件的行为,例如: ```vue <script> import { reactive, toRefs } from 'vue' export default { setup() { const state = reactive({ message: 'Hello, Vue3.0!', count: 0 }) function increment() { state.count++ } return { ...toRefs(state), increment } } } </script> ``` 在上面的代码中,我们定义了一个 `increment()` 函数,用于增加 `count` 的值。然后,在返回的对象中,我们使用 `toRefs()` 函数将响应式对象转换为普通对象,以便在模板中使用它们。我们还将 `increment()` 函数添加到返回的对象中,从而将其作为组件的行为。 ## 步骤三:运行项目 最后,我们需要运行项目以查看效果。可以使用以下命令: ``` npm run serve ``` 然后在浏览器中访问 http://localhost:8080 即可看到效果。 以上就是一个简单的 Vue3.0 项目实战教程,希望能对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云端君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值