共计 3642 个字符,预计需要花费 10 分钟才能阅读完成。
前言
最近公司有个 vue 的我的项目,须要本地应用 nginx 启动运行,我感觉应用 docker 正适宜,所以记录下来分享给大家
筹备工作
docker 装置 nginx 镜像
docker pull nginx
编译 vue 我的项目
查看 vue 我的项目 package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
而后应用如下命令编译到 dist 文件夹下
npm run build
编译之后会生成到 dist 文件夹下,这里咱们会遇到一个问题,先咱们查看 vue.config.js 文件
module.exports = {
publicPath: '/mvue',
runtimeCompiler: true,
这里咱们能够看到,publicPath:’/mvue’,意思就是说生成的 index.html 文件会以 /mvue 为目录,如下所示:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/mvue/favicon.ico> <link rel=stylesheet href=/mvue/style.css> <script src=/mvue/sso.js>
</script> <title>x7-manage</title>
<link href=/mvue/css/chunk-029a266b.ae198b8f.css rel=prefetch>
<link href=/mvue/css/chunk-0e19dd50.56b34581.css rel=prefetch>
<link href=/mvue/css/chunk-32fbd092.d54e527a.css rel=prefetch>
<link href=/mvue/css/chunk-4fe24ae8.3ad4b2fa.css rel=prefetch>
<link href=/mvue/css/chunk-555e9cec.0b71df2b.css rel=prefetch>
<link href=/mvue/css/group-portal.846ae1f7.css rel=prefetch>
<link href=/mvue/js/chunk-029a266b.f7ef4a5e.js rel=prefetch>
<link href=/mvue/js/chunk-0e19dd50.a4a3fb7b.js rel=prefetch>
<link href=/mvue/js/chunk-32fbd092.d215351e.js rel=prefetch>
<link href=/mvue/js/chunk-4fe24ae8.44626d02.js rel=prefetch>
<link href=/mvue/js/chunk-555e9cec.32e5e3df.js rel=prefetch>
<link href=/mvue/js/chunk-fdf08432.bf5a8420.js rel=prefetch>
<link href=/mvue/js/group-portal.c513f391.js rel=prefetch>
<link href=/mvue/css/app.15268106.css rel=preload as=style>
<link href=/mvue/css/chunk-vendors.4cb091d7.css rel=preload as=style>
<link href=/mvue/js/app.bb879746.js rel=preload as=script>
<link href=/mvue/js/chunk-vendors.099adcdc.js rel=preload as=script>
<link href=/mvue/js/index.a9a2084a.js rel=preload as=script>
<link href=/mvue/css/chunk-vendors.4cb091d7.css rel=stylesheet>
<link href=/mvue/css/app.15268106.css rel=stylesheet>
</head>
<body><noscript><strong>We're sorry but x7-manage doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong></noscript>
<div id=app></div>
<script src=/mvue/js/chunk-vendors.099adcdc.js> </script> <script src=/mvue/js/index.a9a2084a.js> </script> <script
src=/mvue/js/app.bb879746.js> </script> </body> </html>
留神这点,咱们应该就晓得了,所以咱们新建一个 /mvue 目录,而后把生成的 /dist 文件全副复制到 /mvue 外面,目录构造如下所示:
这样就实现了 vue 我的项目的编译工作
配置 nginx
根目录下创立 /nginx 目录,并新增 nginx.conf 文件,如下所示:
user root;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {worker_connections 1024;}
http {
include mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local]"$request"''$status $body_bytes_sent "$http_referer" ''"$http_user_agent""$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html;
}
location /mvue {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /mvue/index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {root /usr/share/nginx/html;}
}
}
其中,留神 location / 和 location /mvue 的写法,因为咱们创立了 /mvue 目录,因而,咱们在 location /mvue 中指定了 index.html 的绝对路径:
try_files $uri $uri/ /mvue/index.html;
这样就实现了 nginx.conf 的配置
docker 运行 vue 我的项目
下面的两步操作:
1、生成 /dist(蕴含 /mvue) 目录,
2、配置 nginx.conf 都曾经实现了,接下来咱们就应用 docker 来运行,如下所示:
docker run --name eip-manage -p 80:80 -v $PWD/dist:/usr/share/nginx/html:rw -v $PWD/nginx/nginx.conf:/etc/nginx/nginx.conf -v $PWD/nginx/logs:/var/log/nginx -d nginx
点击回车即可生成一个 container,而后咱们能够浏览器中胜利预览,至此就实现了全副工作。
总结
1、当然你能够应用 docker 来生成镜像来运行也是能够的,不过每次都生成镜像浪费时间,应用这种形式在不装置 nginx 的状况下运行 vue 我的项目,十分不便,极力推荐给大家
2、因为 vue.config.js 应用了 publicPath: ‘/mvue’, 所以要本人在 dist 中创立一个这个目录,否则应用 docker run 运行起来就会报 404 或 500 的错,这个千万留神
援用
vue-docker-nginx
nginx 中部署多 vue 我的项目