什么站做咨询网站好,互联网专业主要学什么,合肥建设网站查询,郑州网络推广平台有哪些前言
我这里 使用Vue CLI#xff08;Vue Command Line Interface#xff09;创建Vue.js项目是一种简单的方式#xff0c;它提供了一个交互式的命令行工具来帮助你初始化和管理Vue.js项目。
并且我这个项目需要区分生产环境和开发环境。这里具体完整记录下#xff0c;整个…前言
我这里 使用Vue CLIVue Command Line Interface创建Vue.js项目是一种简单的方式它提供了一个交互式的命令行工具来帮助你初始化和管理Vue.js项目。
并且我这个项目需要区分生产环境和开发环境。这里具体完整记录下整个过程。
环境
nginx访问端口8888前端端口8888后端端口8080
具体步骤
1. 安装Vue CLI
首先确保你已经安装了Node.js。然后打开终端并运行以下命令来安装Vue CLI
npm install -g vue/cli2. 创建Vue.js项目
在终端中使用以下命令创建一个新的Vue.js项目
vue create my-vue-projectmy-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 development4. 创建配置环境文件
.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完成
