前言
我这里 使用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 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, //是否启用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
完成!