浅谈vue-cli 3.0.x 初体验

网络编程 2025/1/10 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

最近项目正在优化。乘着有时间看了一下 vue-cli3.0.x 使用。感觉还蛮不错的。因为之前项目使用的 vue-cli 2 创建的，强行使用 eslint让我们很难受，一些与项目无关的 “build” 和 “config” ，让人看着就有一些不爽。由于公司环境比较多，需要测试环境的配置。增加了 “”tt”: “node build/tt-build.js”” 。到 3.0.x 应该怎么用？带着这些问题来看 3.0.x 感觉就好多了。

1. 官网资料

在学习技术的时候，经常看查看官网的资料。因为那里的资料更新是最快的。
vue-cli
vue-cli 文档

2. 安装环境

这里犸特头，推荐大家使用 npm install -g @vue/cli ,通过 yarn global add @vue/cli 还需要进行其他设置，还生成一些文件删除几分钟。

npm install -g @vue/cli
# or
yarn global add @vue/cli
# 使用vue命令，创建项目(不同于cli2.0的init，create)
vue create my-project

如果您使用 yarn global add @vue/cli 安装需要进入目录。执行

yarn // 安装项目依赖
cd packages/@vue/cli // 目录
yarn link //添加 link `vue` 执行指命 。
vue create my-project // 创建项目 。

3. 多环境配置

因为公司有开发环境，测试环境，联调环境，线上环境。减少人为配置，一次配置对原则。所以在2.0.x 增加了“package.json “tt”: “node build/tt-build.js”” 类型的配置，配置不了不少文件。在 vue-cli 3.0.x 里面支持 “.env” 文件配置 ,我这里增加 “.env.development” ， “.env.production”和“.env.test” 配置。

1. 基本对应和默认

  development is used by vue-cli-service serve
  production is used by vue-cli-service build
  test is used by vue-cli-service test

2. 指定配置启动

增加其他配置，需要下面指定配置。

"dev-build": "vue-cli-service build --mode development",

3.”.env “配置文件编写

配置文件内容格式如下，

 VUE_APP_*

例如：”.env.production” 内容如下

VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'

4. 调整用环境配置

 console.log(process.env.VUE_APP_MOCK_URL);
process.env.NODE_ENV // 特定
BASE_URL // vue.config.js 配置

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue-cli,3.0.x,vue,cli,3.x

标签：

vue-cli,3.0.x,vue,cli,3.x

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“浅谈vue-cli 3.0.x 初体验”

暂无浅谈vue-cli 3.0.x 初体验的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

更新日志

2025年01月10日

浅谈vue-cli 3.0.x 初体验

vue-cli,3.0.x,vue,cli,3.x

手动用webpack搭建第一个ReactApp的示例

vue 组件高级用法实例详解

评论“浅谈vue-cli 3.0.x 初体验”

更新日志

友情链接