前言
最近公司有个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不变
root /usr/share/nginx/html;
# 这个index是你页面的默认地址,随机应变
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 yourname -p 8080: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的错,这个千万注意
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。