网站开发常见bugseo快速培训
前言
我这里 使用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 servetest模式用于vue-cli-service test:unitproduction模式用于vue-cli-service build和vue-cli-service test:e2e
你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：
vue-cli-service build --mode development
4. 创建配置环境文件
.env.test（测试环境）配置内容
NODE_ENV = 'production'//用来表示是生产环境还是开发环境
VUE_APP_MODE = 'test'//用来表示是生产环境还是测试环境
VUE_APP_BASE_URL = /test-api //这个地址不能带引号，不然获取的就带引号,并且路径指向后端
outputDir = test //用来表示打包的名字
.env.development（开发环境）配置内容
NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_BASE_URL = /dev-api
.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
完成！