Webpack - Vue 配置开发环境与正式环境

简介: Webpack - Vue 配置开发环境与正式环境

  • 在手动设置之前,可以看一下 Vue-Cli 官方的 环境变量和模式
  • 通常开发运行项目时候只需要一个development(开发环境),打包时候却可能需要多种环境(测试环境、uat环境、正式环境),那么我们就需要添加支持多种环境的包,其实也就是每个一个环境对应一个配置文件。
  • 新建一个Vue项目 Vue升级3.x以及项目创建
vue create vue-webpack-test
  • 创建完成之后是这样的:

  • 创建配置文件


在根目录下创建 .env.development(开发环境)、.env.production(生产环境)文件,这里的.env后面的名字可以自己随便起,但是默认是有2种环境(development、production),如果想多增加别的环境就手动创建新的.env文件即可。也就是你想要什么文件只需要 .env.xxxx 就行,xxx 就是你可以随便定义的文件名。


同样的 .env.development、.env.production 后面的名字也是可以随便换的,例如 .env.dev、.env.pro,.env.dev1、.env.pro2 都是可以的。


只需要添加好文件之后,到 package.json 文件里面,手动配置好我们添加上的配置文件。


  • 我这里新加了 .env.development、.env.production 这两个文件,里面的内容是这样的:


.env.development:

NODE_ENV = 'development'
VUE_APP_BASE_URL = 'http://www.baidu.com'

.env.development:

NODE_ENV = 'production'
VUE_APP_BASE_URL = 'http://www.baidu.com'

文件里面的 VUE_APP_xxx 是固定写法,后面的 xxx 自己可以随便起名字。

  • 建好配置文件之后,我们就需要到 package.json 里面找到 scripts 添加配置:

默认是这样的:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
},

添加指定配置文件之后:

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production"
 },

--mode 是固定参数,后面的 developmentproduction 参数则就是你创建 .env.development.env.production 文件后面的参数,.env.xxx 文件后面的xxx你写的什么,这里你就配置上去什么 --mode xxx

配置好之后需要重新运行启动:

$ npm run serve

然后你就可以随便找个地方或者页面输出你配置的信息数据了,process 是一个全局的属性, js、vue 文件都可以直接使用:

console.log(process, process.env. VUE_APP_BASE_URL)

7fd61c23780f575c86cfa105f586d8e1_6cff3f34c51ba3dcbde2f230f098c3fa.png

输出就是下面这样的:

你输出的时候会发现打印出来的 process 对象里面 env 是空的,没关系,你直接通过 process.env.xxx 进行使用里面配置的属性就行了。


当然你可以随意添加跟多的自定义环境属性,用于各种场景判断或者使用,只要格式为 VUE_APP_xxx 就行了


当然也还有其他属性:

outputDir 打包时输出的目录名字,默认为dist

常用的也就这些,其他的可以自行百度就行了…


有的环境变量还得结合 vue.config.js 文件来使用,VUE_APP_BASE_URL 这种可以别的地方使用的到是没事,但是有的属性可能专门针对不同环境配置不同的 vue.config.js,例如上的 outputDir 输出文件,就得到 vue.config.js 里面进行配置:

// vue.config.js
module.exports = {
  // 构建(打包)时输出的存放目录
  outputDir: process.env.outputDir
  ... 其他的属性也一样,看你配置的时候是准备用于什么地方就到什么地方使用。
}

  • 通过环境变量配置 axios
baseURL: process.env.VUE_APP_URL // 配置 axios 请求服务器地址

aaca692541e6db43b03f1be248a46183_e7a883f141c8855824c11a53914e117e.png

到时候 axios 就会通过你所运行的环境配置文件去获取里面的 VUE_APP_BASE_URL 了。


相关文章
|
14天前
Vue3使用路由及配置vite.alias简化导入写法
Vue3使用路由及配置vite.alias简化导入写法
19 0
|
17天前
|
JavaScript 前端开发 API
从Vue 2到Vue 3:深入了解路由配置的变化与升级建议
欢迎阅读本篇文章,我们将带您深入探索Vue 2和Vue 3的路由配置。在现代前端开发中,路由是构建交互式Web应用程序不可或缺的一部分。Vue.js作为一种流行的JavaScript框架,在版本2和版本3之间进行了重大改进和升级。
|
18天前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
34 0
|
20天前
|
JavaScript 前端开发 网络架构
第十一章:vue路由配置01基础
第十一章:vue路由配置01基础
38 0
QGS
|
21天前
|
缓存 JavaScript 前端开发
初识Sringboot3+vue3环境准备
初识Sringboot3+vue3环境准备
QGS
21 1
|
23天前
Vue3 配置代理和使用全局axios请求数据
Vue3 配置代理和使用全局axios请求数据
19 1
|
23天前
|
JavaScript
Vue3 + Typescript + Node.js 搭建elementUI使用环境
Vue3 + Typescript + Node.js 搭建elementUI使用环境
14 0
|
23天前
|
JavaScript 前端开发 编译器
Vue快速上手笔记2 - 开发环境的搭建
Vue快速上手笔记2 - 开发环境的搭建
14 0
|
28天前
|
人工智能 移动开发 前端开发
【利用AI让知识体系化】Webpack 相关配置技巧(三)
【利用AI让知识体系化】Webpack 相关配置技巧
|
28天前
|
人工智能 缓存 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧(二)
【利用AI让知识体系化】Webpack 相关配置技巧

相关产品

  • 云迁移中心