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
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
这样只要执行对应的命令就是在本地通过代理模拟