项目参考若依的前端框架去多环境

一、背景

项目部署沙箱或者是生产环境的时候，都会像后端这样，去做多环境，我们可以参考若依框架的配置，让我们的前端环境通过简单配置，切换不同的环境，如开发环境，测试环境，生产环境等。

二、具体步骤

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)

这篇好文章是转载于：学新通技术网