一、vue项目编译打包
1、更新node更新库
2、编译打包
npm run build
该问题的原因是 之前项目代码是在windows环境编译的 现在是在mac环境编译 所以需要下载相应操作系统的编译库
编译成功之后 会生成一个dist文件夹
里面的内容就是即将部署到nginx的静态资源
3、如果想直接启动vue项目
启动的时候 如果报webpack-dev-server: Permission denied错误
处理方式
a、获取nodejs模块安装目录访问权限 （必须执行）
b、安装 淘宝镜像 （cnpm）
c、cnpm -v 如果报sudo: cnpm: command not found
说明此时需要配置下cnpm的环境变量
vim ~/.bash_profile
export PATH=/Users/mengfanxiao/nodejs/npm_global/bin:$PATH
source ~/.bash_profile
d、sudo cnpm install webpack-dev-server -g
e、安装相关依赖
e-1、安装vue脚手架
sudo cnpm install -g vue-cli
e-2、安装项目依赖
cnpm install
e-3、安装 vue 路由模块vue-router和网络请求模块vue-resource
cnpm install vue-router vue-resource --save
e-4、启动项目
npm run dev或cnpm run dev
二、将vue项目部署到docker nginx并实现访问
1、安装最新的nginx
2、先简单nginx运行起来，方便后面我们拷贝容器内部的nginx配置文件
3、将容器中的配置文件复制到宿主机上 普通方式搭建的nginx只需要关注nginx.conf配置文件 docker方式搭建的 需要关注2个配置文件 nginx.conf和default.conf
docker cp ed2f9784a0eb:/etc/nginx/nginx.conf ~/nginx/conf/
docker cp ed2f9784a0eb:/etc/nginx/conf.d/default.conf ~/nginx/conf.d/
4先停止容易 再删除容器 重新启动 （防止端口冲突 修改了下默认端口为7000）
5、将静态文件放在location指定的目录下
6、启动容器
docker run -d --name nginx1 -p 7000:7000 -v /Users/mengfanxiao/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /Users/mengfanxiao/nginx/html:/Users/mengfanxiao/nginx/html -v /Users/mengfanxiao/nginx/logs:/var/log/nginx -v /Users/mengfanxiao/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx
-d 后台启动
-name 容器名称
-p宿主机端口7000 指向容器中端口7000
第一个-v表示将宿主机中的nginx.conf替换调容器中的nginx.conf
第二个-v表示将宿主机中的静态资源文件替换调宿主机中的静态资源文件
第三个-v表示容器中的日志也写到宿主机上方便查看日志
第四个-v表示宿主机上的default.conf配置替换掉容器中的default.conf配置
6、查看启动结果
7、访问静态资源
閱讀更多 平凡人筆記 的文章
