产品体验新方式

正常我们给别人体验新系统时，一般都是推到服务器环境，服务器进行构建生产，然后其他人使用服务器环境进行系统访问，但是整个流程是比较长的，那么有没有一种快捷的方式，人们可以快速体验新系统呢？

本地构建

在公司中，人员都是通过内网访问的，所以我们自然而然就想到 本地构建。而且我们在开发中自然会启动一个开发环境，我们只需要把 localhost 替换成 IPV4 地址，这样就可以给别人访问了。但是开发环境是存在热更新的，所以我们需要新启动一个环境来托管应用程序，这里会遇到以下问题：

• 动态IP
• 接口跨域
• 系统免登录
• 动态环境构建
• 本地构建运行

动态IP

在内网环境，我们连接网络时，根据 DHCP 协议，我们每次都会得到一次不同的 IP，所以我们需要固定住 IP，需要按照如下图方式配置固定的IP：

接口跨域

后台一般会限制哪些域名可以访问接口的，所以我们需要将上一步的固定端口发送给后台，配置进跨域白名单。

系统免登陆

我们可以提供一个路由，URL上提供相应环境和登录 TOKEN 就可以直接登录系统。

动态环境配置

每个系统可能都会有不同的环境，比如开发、测试、生产等等，所以我们需要根据不同的环境来打包出不同的系统环境。
代码实现:

const inquirer =  require('inquirer');
const { run } = require('runjs')
const chalk = require('chalk')
const history = require('connect-history-api-fallback');
const config = require('../vue.config.js')
const fs = require("fs")
const connect = require('connect')
const serveStatic = require('serve-static')
const rawArgv = process.argv.slice(2)
const args = rawArgv.join(' ')
const port = 9526
const distDir = './dist'
const publicPath = config.publicPath

function getIPAddress(){
  let interfaces = require('os').networkInterfaces();
  for(let devName in interfaces){
      let iface = interfaces[devName];
      for(let i=0;i<iface.length;i++){
          let alias = iface[i];
          if(alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal){
              return alias.address;
          }
      }
  }
}
const questions = [
  {
    type: "list",
    name: "mode",
    message: "请选择构建环境:",
    validate:(value)=>{
      if(!value) return false
      return true
    },
    choices:['development', 'production', 'staging'],
    default: "dev"
  },
  {
    type: "input",
    name: "token",
    message: "请输入登录token:",
    validate:(value)=>{
      if(!value) return false
      return true
    }
  }
]
inquirer
  .prompt(questions)
  .then((answers) => {
    const token = answers.token
    const mode = answers.mode
    const env = answers.env
    const report = rawArgv.includes('report')
    const localIP = getIPAddress()
    if(!fs.existsSync(distDir) || rawArgv.includes("dist")){
      args.replace("dist", '')
      run(`vue-cli-service build --mode ${mode}`)
    }
    const app = connect()
    app.use(history());
    app.use(
      publicPath,
      serveStatic(distDir, {
        index: ['index.html', '/']
      })
    )
    app.listen(port, function () {
      console.log(chalk.green(`> Preview at \n\r  http://${localIP}:${port}${publicPath}init?scenario=${env}&token=${token}`))
      if (report) {
        console.log(chalk.green(`> Report at \n\r  http://${localIP}:${port}${publicPath}report.html`))
      }
    })
  })
  .catch((error) => {
    console.error(error)
  });

本地构建运行

1、配置命令并运行 package.json 中配置 "preview": "node build/preview.js"，运行npm run preview

2、选择构建环境

3、输入页面 TOKEN

4、生成预览链接

总结

本文通过构建一个本地服务器，托管代码应用程序，生成一个稳定的产品体验链接，实现产品和功能的快速体验，相当于 vite 中的 npm run preview功能。