新

Author: jialudev

Dockerfile

@@ -0,0 +1,5 @@
+FROM nginx
+
+COPY dist/ /usr/share/nginx/html/
+
+COPY nginx/default.conf /etc/nginx/conf.d/default.conf

README.md

@@ -1,19 +1,31 @@
 # vue-docker-nginx
 
-## Project setup
-```
-npm install
-```
+> A Vue.js project
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+## 将vue项目配合nginx在docker中打包运行
 
-### Compiles and minifies for production
-```
+## Build Setup
+
+``` bash
+# 打开docker
+
+#下载docker中下载nginx
+docker pull nginx
+
+# 安装vue项目中的npm依赖
+npm install
+
+# 本地打包，生成dist文件
 npm run build
+
+# docker创建镜像
+docker build -t vue-docker-nginx .
+
+# 本地localhost:4000端口监听容器80容器启动docker
+docker run -p 4000:8080 -d vue-docker-nginx
+
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+现在就可以在本机游览器查看在docker中启动的项目了。http://localhost:4000/ 
+
+![Image](https://raw.githubusercontent.com/Mary5haw/vue-docker-nginx/master/img/img1.png)

img/img1.png

@@ -0,0 +1,43 @@
+server {
+  
+listen 8080;
+  
+server_name localhost;
+  
+  
+  
+#charset koi8-r;
+  
+access_log /var/log/nginx/host.access.log main;
+  
+error_log /var/log/nginx/error.log error;
+  
+  
+  
+location / {
+  
+root /usr/share/nginx/html;
+  
+index index.html index.htm;
+  
+}
+  
+  
+  
+#error_page 404 /404.html;
+  
+  
+  
+# redirect server error pages to the static page /50x.html
+  
+#
+  
+error_page 500 502 503 504 /50x.html;
+  
+location = /50x.html {
+  
+root /usr/share/nginx/html;
+  
+}
+  
+}

nginx/default.conf

@@ -1,7 +1,9 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <h1>Congratulations on your!<br />Successful run vue in docker!</h1>
+    <img alt="Vue logo"
+         src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App" />
   </div>
 </template>
 
@@ -18,7 +20,7 @@ export default {
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;