1、我这边是把Vue项目部署到nginx下面的html=>hyw,如下图所示:
        

       nginx部署Vue项目(心得,记录下,绝对受益)

 

2、路径确定后,返回到Vue项目中,这里面要修改三个地方,如图所示:

1)router=>index.js添加base:"项目目录",

mode:"history"(主要作用url不带#)


nginx部署Vue项目(心得,记录下,绝对受益)

2)config=>index.js,大约48行,把assetsPublicPath里面的值也改成nginx项目目录

nginx部署Vue项目(心得,记录下,绝对受益)

3)build=>webpack.prod.conf.js,里面把publicPath的引用目录也添加nginx项目目录

nginx部署Vue项目(心得,记录下,绝对受益)

3、前端打包。npm run build 打包成dist,里面的index和static文件夹放到nginx里面的hyw目录,

4、nginx配置,conf=>nginx.conf里面配置文件,需要注意几点:

1)默认给个初始项目路径 root /usr/local/nginx/html; 

2)然后到hyw目录进行重定向,下面的这几行代码一定要写,一定要写,要不手动刷新F5会报404!!!

location /hyw/
    {
    try_files $uri $uri/ @router;
    }
    location @router 
    {
    rewrite ^.*$ /hyw/index.html last;
    }

nginx部署Vue项目(心得,记录下,绝对受益)

好了,到此结束,大功告成!

希望对小伙伴们有帮助!!!

 

 

相关文章: