• vue管理系统从0到1-本地预览
  • Artiely
  • #vue
  • 2020-06-05
  • 222
  • 2 min read
  • loading...

vue管理系统从0到1-本地预览

前一节我们设置了环境和模式,现在我们来实现本地预览,主要是为了本地先测试,有问题提前暴露

首先我们在根目录创建一个server.js

var express = require('express')
var path = require('path')
var app = express()
// var opn = require('opn')
var localhost = require('address').ip()
let staticDir
let baseUrl
const argv = process.argv[2]
if (argv === 'test') {
  staticDir = '/dist/test'
  baseUrl = 'http://118.31.222.92:8088'
} else if (argv === 'stage') {
  staticDir = '/dist/gray'
  baseUrl = 'http://101.37.27.140:12800'
} else if (argv === 'release') {
  staticDir = '/dist/release'
  baseUrl = 'https://sp.timing360.com'
}
app.use(express.static(path.join(__dirname, staticDir)))
var proxy = require('http-proxy-middleware')

var options = {
  target: baseUrl, // 测试
  changeOrigin: true, // 需要虚拟主机站点
  pathRewrite: {}
}
var exampleProxy = proxy(options) // 开启代理功能,并加载配置
app.use('/', exampleProxy)
app.listen(8888, err => {
  var uri = `http://${localhost}:8888`
  if (!err) {
    console.log(uri)
  } else {
    console.log(err)
  }
})

复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

然后配置package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "deploy": "pm2 deploy deploy.yml production",
    "build:test": "vue-cli-service build --mode test",
    "build:stage": "vue-cli-service build --mode stage",
    "build:release": "vue-cli-service build --mode release",
    "build:all": "npm run build:test && npm run build:stage && npm run build:release",
+   "local:test": "node ./server.js test",
+   "local:stage": "node ./server.js stage",
+   "local:release": "node ./server.js release",
    "preview": "node build/index.js --preview",
    "lint": "eslint --fix --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  },
复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样只要执行对应的命令就是在本地通过代理模拟线上的环境。把上线的不确定性在本地提前暴露。