docker nginx运行vue编译后的项目

2020/11/18 14:25:23

编程Tag： vue.js nginx docker

本文主要是介绍docker nginx运行vue编译后的项目，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

最近公司有个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项目

这篇关于docker nginx运行vue编译后的项目的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

docker nginx运行vue编译后的项目

前言

准备工作

编译vue项目

配置nginx

docker 运行 vue项目

总结

引用

相关编程文章