首页 前端知识 【VUE】记录一次 VUE中配置生产环境和开发环境方法

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

2024-05-29 10:05:22 前端知识 前端哥 194 511 我要收藏

前言

我这里 使用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#模式

模式是 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,	//是否启用ssl
	  proxy: {
	  	//配置跨域
			[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.conf

server {
  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

完成!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10006.html
标签
评论
发布的文章

使用 mapstructure 解析 json

2024-06-05 13:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!