vue【简单】项目打包部署本地nginx（Windows）

vue【手把手简单】项目打包部署本地nginx（Windows）

安装nginx（windows)

创建vue项目（vue2 ）

打包部署

一、 修改publicPath: ‘/oauth2-client/’

publicPath：默认为’/’）
vue.config.js

module.exports = {
	// publicPath: process.env.NODE_ENV === "production" ? "/oauth2-client/" : "/",
	publicPath: '/oauth2-client/',
	// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
	outputDir: 'dist',
	// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
	assetsDir: 'static',
}

二、设置RueRrouter history的base配置

路径需与publicPath一致
（cli创建项目时vue-router默认使用history模式）

三、 终端执行npm run build 打包生成dist文件

三、 将dist放入nginx

1.在html创建dist文件夹

• 将打包好的dist文件放在html后重名名为“oauth2-client”
  

四、配置Nginx

找到nginx.conf配置文件 在80 server下新增location

• 配完后得nginx -t测试nginx配置文件是否正确

location /oauth2-client/ {
            root D:/nginx-1.18.0/html/dist;
            index  index.html index.htm;
            access_log  logs/oauth2-client.access.log;
            error_log  logs/oauth2-client.error.log error; #记录一下error日志注意路劲出错问题
        }

五、启动Nginx

1.启动前先检查Nginx是否关闭能否成功重启（windows的Nginx）

• 浏览器开启无痕模式（为了防止受浏览器缓存影响）输入localhost检查Nginx是否关闭

• 强制关闭服务：nginx -s stop

• Ctr+Shift+Esc打开任务管理器-》用户->查看nginx进程是否还在->把它彻底清除（实在不行重启computer）

2.启动Nginx
start nginx

六、访问Nginx前端页面

• 浏览器无痕模式访问localhost查看nginx是否成功开启
• 访问localhost/oauth2-client/ OK
  
  路由跳转也成功了
  

##[ERROR]root 的问题
从error_log的错误日志可以看出 路径html下默认带dist
##[ERROR]history模式打包后页面刷新或跳转问题