vue-projects

Recently developed a vue operational background project, involving the service agent, and the deployment, today want to summarize how the vue agent in the development environment, and how to server deployment, involves the interface on multiple servers, so, not only agent. Here are some examples of my projects.

How does vue start the environment agent?

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
dev: {
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
env: require('./dev.env'),
port: 3000,
autoOpenBrowser: true,
assetsSubDirectory: 'admin_static',
assetsPublicPath: '/',
proxyTable: {
'/cross': {
target: 'http://www.baidu.com/cross',changeOrigin: true,pathRewrite: {"^/cross" : ""}
}
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}

Node.js deploys vue span.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var proxy = require('http-proxy-middleware');
var fs = require('fs');
// proxy middleware options
var options = {
target: 'http://www.baidu.com', // target host
changeOrigin: true, // needed for virtual hosted sites
ws: true, // proxy websockets
pathRewrite: {
'^/cross' : '/cross', // rewrite path
'^/crossmeeting' : '/crossmeeting', // rewrite path
'^/demand' : '/demand', // rewrite path
'^/ask-answer' : '/ask-answer', // rewrite path
// '^/api/remove/path' : '/path' // remove base path
},
router: {
// when request.headers.host == 'dev.localhost:3000',
// override target 'http://www.example.org' to 'http://localhost:8000'
'http://www.baidu.com' : 'http://localhost:3000'
}
};
// create the proxy (without context)
var exampleProxy = proxy(options);
var app = express();
app.use('/cross', exampleProxy);
app.use('/crossmeeting', exampleProxy);
app.use('/demand', exampleProxy);
app.use('/ask-answer', exampleProxy);
/*app.use('/vod', exampleProxy);
app.use('/pub', exampleProxy);
app.use('/permission', exampleProxy);
app.use('/metadata', exampleProxy);
app.use('/tags', exampleProxy);
app.use('/directory', exampleProxy);
app.use('/crossApi', exampleProxy);
app.use('/community', exampleProxy);
app.use('/meeting', exampleProxy);
app.use('/crossimserver', exampleProxy);
app.use('/knowledge', exampleProxy);
app.use('/column', exampleProxy);
app.use('/payment', exampleProxy);
app.use('/dynamicNews', exampleProxy);
app.use('/mobile', exampleProxy); */
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.get('*',function (req, res) {
const html = fs.readFileSync(path.resolve(__dirname, 'public/index.html'), 'utf-8')
res.send(html)
})
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;

Express the generator

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"name": "vue-server",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.17.1",
"cookie-parser": "~1.4.3",
"debug": "~2.6.3",
"ejs": "~2.5.6",
"express": "~4.15.2",
"morgan": "~1.8.1",
"serve-favicon": "~2.4.2"
},
"devDependencies": {
"http-proxy-middleware": "^0.18.0"
}
}

Vue USES the browser’s history.pushstate API.

The vue-router default hash mode - using the URL’s hash to simulate a full URL, the page will not reload when the URL changes.

If you don’t want ugly hashes, we can use the route history model, which makes full use of the history.pushstate API to complete the URL jump without reloading the page.

1
2
3
4
const router = new VueRouter({
mode: 'history',
routes: [...]
})