【VUE】记录一次 VUE中配置生产环境和开发环境方法

前言

我这里 使用Vue CLI(Vue Command Line Interface)创建Vue.js项目是一种简单的方式,它提供了一个交互式的命令行工具来帮助你初始化和管理Vue.js项目。

并且我这个项目需要区分生产环境和开发环境。这里具体完整记录下,整个过程。

环境

  • nginx访问端口:8888
  • 前端端口:8888
  • 后端端口:8080

具体步骤

1. 安装Vue CLI:

首先,确保你已经安装了Node.js。然后打开终端并运行以下命令来安装Vue CLI:

npm install -g @vue/cli

2. 创建Vue.js项目:

在终端中,使用以下命令创建一个新的Vue.js项目:

vue create my-vue-project

my-vue-project是你的项目名称,你可以替换为你喜欢的名称。

3. 模式简介

以下内容来自: https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:

  • development 模式用于 vue-cli-service serve
  • test 模式用于 vue-cli-service test:unit
  • production 模式用于 vue-cli-service buildvue-cli-service test:e2e
    你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量:
vue-cli-service build --mode development

4. 创建配置环境文件

  1. .env.test(测试环境)配置内容
NODE_ENV = 'production'//用来表示是生产环境还是开发环境
VUE_APP_MODE = 'test'//用来表示是生产环境还是测试环境
VUE_APP_BASE_URL = /test-api    //这个地址不能带引号,不然获取的就带引号,并且路径指向后端
outputDir = test //用来表示打包的名字
  1. .env.development(开发环境)配置内容
NODE_ENV = 'development'
VUE_APP_MODE = 'development' 
VUE_APP_BASE_URL = /dev-api
  1. .env.production文件(生产环境)配置内容
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_BASE_URL = /prod-api // 这里填写生产环境的后端地址

5. 在package.json中添加打包

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","build:test": "vue-cli-service build --mode test",//新添加,打包时,打包test环境"build:prod": "vue-cli-service build --mode production",//新添加,打包时,打包production环境"build:dev": "vue-cli-service build --mode development",//新添加,打包时,打包development环境"lint": "vue-cli-service lint"},

6. 在vue.config.js中配置

module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,devServer: {port: 8888,host: '0.0.0.0',https: false,	//是否启用sslproxy: {//配置跨域[process.env.VUE_APP_BASE_URL]: {target: "http://localhost:8080",ws: true,changOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_URL] : '/'}}},}
})

重点:

proxy: {//配置跨域[process.env.VUE_APP_BASE_URL]: {target: "http://localhost:8080",ws: true,changOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_URL] : '/'}}

其中 process.env.VUE_APP_BASE_URL 对应的是上面配置的不同环境的 VUE_APP_BASE_URL ,我这里是 /dev-api/prod-api/test-api

pathRewrite: {['^' + process.env.VUE_APP_BASE_URL] : '/'
}

这个是 将 /dev-api/prod-api/test-api 改为 ’/‘。

7. http.js (axios )

console.log(process.env.VUE_APP_BASE_URL)
//创建axios实例
var service = axios.create({baseURL: process.env.VUE_APP_BASE_URL,timeout: 15000,headers: {// 'content-type': 'application/json',// "token":'14a1347f412b319b0fef270489f'}
})

8. 打包

npm run build:prod

参考第5步,我们修改的脚本。因为我这里打包的是生产环境,故用这个命令。

上传到服务器,略。

9. nginx 配置

linux 服务器上nginx配置如下:

vim /usr/local/nginx/conf/conf.d/vue.confserver {listen 8888;server_name 172.25.34.157;  # 可以根据需要修改location / {root /var/www/html/dist;  # 指向 Vue 项目的 dist 目录index index.html index.htm;try_files $uri $uri/ /index.html;  # 处理单页面应用路由}location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://localhost:8080/; #指向后端地址}# 可以添加其他配置,如 SSL 配置等
}

重载 nginx 服务

/usr/local/nginx/sbin/nginx -s reload

完成!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/633797.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第15届蓝桥杯嵌入式省赛准备第二天总结笔记(使用STM32cubeMX创建hal库工程+按键输入)

一.查看电路图 按键是使用的PB0,PB1,PB2,PA0四个引脚,然后使用CubeMX配置引脚,4个脚都配置为输入模式和上拉。 程序生成之后把不用的删掉,需要的留下,这里我把函数名改了。 然后写按键扫描读取程序,这里参考的正点原子…

Vue中ElementUI结合transform使用时,修复el-select弹框定位不准确问题

在大屏开发中,比如将1920*1080放到更大像素(3500*2400)大屏上演示,此时需要使用到transform来对页面进行缩放,但是此时发现弹框定位出错问题,无法准备定位到实际位置。之前写过一篇讲解的是ElementUI中的&l…

【Android】自定义View onDraw()方法会调用两次

问题 自定义了View后,在构造函数中设置画笔颜色,发现它没起效,但是在onDraw()里设置颜色就会起效,出问题的代码如下: public RoundSeekbarView(Context context, Nullable AttributeSet attrs) {super(context, attrs…

视频美颜SDK与人工智能的结合:技术突破与挑战

本篇文章,小编将与大家共同探讨美颜SDK与人工智能结合背后的技术原理、创新应用以及面临的挑战。 一、技术原理:人工智能在美颜中的应用 视频美颜SDK通过整合深度学习和计算机视觉技术,能够更准确地识别人脸特征、肤色、表情等信息&#xff…

深入理解傅里叶变换

目录 1. 什么是傅里叶变换 2. 为什么要分解为正弦波的叠加参考资料 1. 什么是傅里叶变换 高等数学中一般是从周期函数的傅里叶级数开始介绍的,这里也不例外。 简单的说,从高中我们就学过一个理想的波可以用三角函数来描述,但是实际上的波可…

MAC iterm 显示git分支名

要在Mac上的iTerm中显示Git分支名,您需要使用一个名为“Oh My Zsh”的插件。Oh My Zsh是一个流行的Zsh框架,它提供了许多有用的功能和插件,包括在终端中显示Git分支名。 以下是在iTerm中显示Git分支名的步骤: 1、安装Oh My Zsh&…

Git入门详细教程

一、Git概述🎇 Git官网 Git是一个开源的分布式版本控制系统,用于跟踪文件的变化和协作开发。它允许多个开发者在同一项目中共同工作,并能够有效地管理代码的版本和历史记录。Git可以帮助开发团队更好地协作,追踪代码变更&#xf…

什么是比特币?

比特币 比特币 (英语:Bitcoin,缩写:BTC )是一种基于 去中心化,采用 点对点网络,开放源代码,以 区块链 作为底层技术的 加密货币。比特币由 中本聪(Satoshi Nakamoto&…

Nginx前后端分离部署springboot和vue项目

Nginx前后端分离部署springboot和vue项目,其实用的比较多,有的小伙伴对其原理和配置还一知半解,现在就科普一下: 1、准备后端项目 后端工程无论是微服务还是单体,一般最终都是jar启动,关键点就是把后端服…

go mock模拟接口的实现

简介 mock翻译过来是‘模拟’的意思,也就是模拟接口返回的信息,用已有的信息替换接口返回的信息,从而提供仿真环境,实现模拟数据下的功能测试; 在多人合作编码时,你写的一个函数func DoSth(People)用到了别…

【android】有些系统的应用唤起不了

Intent launchIntent getActivity().getPackageManager().getLaunchIntentForPackage("com.miui.screenrecorder"); if (launchIntent ! null) {// 应用存在,可以启动startActivity(launchIntent); } else {// 应用不存在,可以提示用户或者采…

主数据清洗的一般过程

在对主数据进行清洗之前,要先对主数据进行预处理。主数据预处理一般分为两个步骤, 将数据导入处理工具,比如数据库; 分析属性数据元 包括字段解释、数据来源、代码表等一切描述数据的信息,抽取一部分主数据作为样本数据…

【备战蓝桥杯】图论重点 敲黑板啦!

蓝桥杯备赛 | 洛谷做题打卡day11 文章目录 蓝桥杯备赛 | 洛谷做题打卡day11杂务题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 题解代码我的一些话 杂务 题目描述 John 的农场在给奶牛挤奶前有很多杂务要完成,每一项杂务都需要一定的时间来完成它。比如&a…

c#让三个线程按照顺序执行

现实的例子 三个线程都是while(true)的循环体 A线程:采集数据 B线程:画曲线 C线程:存数据库 AutoResetEvent类 AutoResetEvent 是一个线程同步的类,它提供了一种机制,允许一个或多个线程等待直…

Unity之四元数

欧拉角 万向节死锁 四元数是什么 Unity中四元数的初始化 四元数和欧拉角的互相转换 补充 四元数相乘代表旋转四元数

vue3中的nexttick

在 Vue 3 中,nextTick 是一个用于延迟执行代码的方法,直到下一次 DOM 更新循环结束。这个方法在 Vue 的生命周期钩子函数和其他需要等待 DOM 更新后再执行某些操作的情况下非常有用。 例如,如果在父子组件中,父组件向子组件传递参…

ABAP - 变量杂例1

** 常用的预定义数据类型 ** ** 类型缩写 类型 默认长度 最大长度 初始值 描述 ** C 字符 1 space 字符串,‘Program’ ** D 日期 8 8 00000000 ** F 浮…

vue3使用自定义组件内方法

重点 使用 defineExpose 来导出方法 // child <script setup> import { ref, Ref } from vueconst prop: Ref<string> ref(child)const method (val: string) > {console.log(val) }defineExpose({prop,method, }) </script>// father <template&g…

Linux Shell脚本入门

目录 介绍 编写格式与执行方式 Shell脚本文件编写规范 脚本文件后缀名规范 首行格式规范 注释格式 shell脚本HelloWord入门案例 需求 效果 实现步骤 脚本文件的常用执行三种方式 介绍 3种方式的区别 小结 多命令处理 Shell变量 环境变量 目标 Shell变量的介绍 变量类型 系统环境…

手把手带你死磕ORBSLAM3源代码(四十九) FrameDrawer.cc DrawFrame

目录 一.前言 二.代码 2.1完整代码 一.前言 这段代码的主要部分。 变量声明: 使用OpenCV库(表示为cv::)声明了多个变量,包括图像(im)、关键点(vIniKeys, vCurrentKeys等)、匹配(vMatches)、跟踪点(vTracks)等。state 表示跟踪的状态。Frame、MapPoint 可能是自…