项目参考若依的前端框架去多环境
一、背景
项目部署沙箱或者是生产环境的时候,都会像后端这样,去做多环境,我们可以参考若依框架的配置,让我们的前端环境通过简单配置,切换不同的环境,如开发环境,测试环境,生产环境等。
二、具体步骤
2.1初始化三个配置文件
(1).env.development
# 页面标题/项目标题
VUE_APP_TITLE = XXXXXXX
# 开发环境配置
ENV = 'development'
# XXXXXXX后台管理系统/开发环境
VUE_APP_BASE_API = '/api'
# 应用访问路径 例如使用前缀 /admin/
VUE_APP_CONTEXT_PATH = './'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
#版本号
VERSION = '1.0.0'
(2) .env.staging
# 页面标题/项目标题
VUE_APP_TITLE = XXXXXXX
# 测试环境配置
ENV = 'staging'
# XXXXXXX后台管理系统/测试环境
VUE_APP_BASE_API = '/api'
# 应用访问路径 例如使用前缀 /admin/
VUE_APP_CONTEXT_PATH = './'
#版本号
VERSION = '1.0.0'
(3).env.production
# 页面标题/项目标题
VUE_APP_TITLE = XXXXXXX
# 生产环境配置
ENV = 'production'
# XXXXXXX后台管理系统/生产环境
VUE_APP_BASE_API = '/api'
# 应用访问路径 例如使用前缀 /admin/
VUE_APP_CONTEXT_PATH = './'
#版本号
VERSION = '1.0.0'
后面被运维改成了
# 页面标题/项目标题
VUE_APP_TITLE = XXXXXXX
# 生产环境配置
ENV = 'production'
# XXXXXXX后台管理系统/生产环境
VUE_APP_BASE_API = '/web/api'
# 应用访问路径 例如使用前缀 /admin/
VUE_APP_CONTEXT_PATH = '/web/'
#版本号
VERSION = '1.0.0'
2.2 修改package.json
"scripts": {
"dev": "vue-cli-service serve --mode development",
"build:prod": "vue-cli-service --mode production",
"build:stage": "vue-cli-service build --mode staging",
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build --mode prod",
"test:unit": "jest --clearCache && jest --config jest.config.js --coverage --silent --no-cache --no-store --mode prod /test/unit/specs/views/login.spec.js",
"test:config": "jest --showConfig",
"test:clear": "jest --clearCache",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"debugger": "node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit --runInBand --no-cache --no-watchman --mode prod",
"preview": "node build/index.js --preview",
"e2e": "node test/e2e/runner.js",
"start": "npm run dev",
"test": "npm run unit && npm run e2e"
},
注意:以上内容是有问题的,build:prod的内容是错的,应该要加上 build
于是有了
"build:prod": "vue-cli-service build --mode production",
2.3 修改vue.config
const name = process.env.VUE_APP_TITLE ||'XXXXX' // 标题
const port = process.env.port || process.env.npm_config_port || 80 // 端口
const version = new Date().getTime() '-' process.env.VERSION
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分,具体配置参考文档
module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
// 如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.hao123.com/admin/,则设置 baseUrl 为 /admin/。
publicPath: process.env.VUE_APP_CONTEXT_PATH,
// 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
outputDir: 'dist',
// 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
assetsDir: 'static',
// 是否开启eslint保存检测,有效值:ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development',
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: port,
open: true,
proxy: {
// 配置代理
[process.env.VUE_APP_BASE_API]: {
timeout: 1920000,
// 要访问的接口域名
target: 'http://localhost:后端业务端口号/',
// 是否启用websockets
ws: false,
// 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
changeOrigin: true,
pathRewrite: {
// 这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可
['^' process.env.VUE_APP_BASE_API]: ''
},
onProxyRes (proxyRes, req, res) {}
}
},
disableHostCheck: true
},
三、验证
使用npm run dev运行前端的工程后,业务可以正常使用,并正常访问后端的服务。
说明多环境的改造成功
四、vue-cli-service serve怎么用?
命令:vue-cli-service serve
作用:运行服务。
vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带模块热重载 (Hot-Module-Replacement)。
用法:vue-cli-service serve [options] [entry]
选项:
–open
在服务器启动时打开浏览器
–copy
在服务器启动时将 URL 复制到剪切版
–mode
指定环境模式 (默认值:development)
–host
指定 host (默认值:0.0.0.0)
–port
指定 port (默认值:8080)
–https
使用 https (默认值:false)
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggeifh
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01