vue部署到nginx的location配置（可以在不同路径刷新404）

官网：https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子

我项目中设置vue路由为history模式，项目就会少了地址栏的#号，比较美观，同时也会存在一系列问题。部署到nginx后会存在刷新404的问题。所以想用好该模式需要后端配合。官网有说明的

nginx的配置

修改nginx的location配置，使用try_files直接指定到index.html文件

location / {
            # root 根目录，默认nginx下的html文件夹，可以指定其他
            root   ./html;
            index  index.html;
            # vue的路由并不是真实物理路由，所以用try_files，路径都指向根目录下的index.html
            try_files $uri $uri/ /index.html;
        }

root：随便指定一个目录，目录下存放vue构建后的文件

index：指定的首页文件

try_files：因为vue的路由都是从index.html作为入口，所以用try_files就对了

 

js、css等引入失败

js、css等文件路径加载有误，跟地址栏的路由拼接起来作为js、css的目录了。找了很多资料，后来发现，是因为我的配置中使用了相对路径

 

查找很久，刚开始以为是nginx的锅，后来才发现，原来是我改成相对路径导致的

assetsPublicPath: './',

项目中config文件夹下index.js中，默认是"/"，因为本地打开build时页面空白，所以修改成相对路径"./"，结果影响到部署服务器了。因为我的路由模式是history，而且存在多个子路由。所以应该改成绝对路径。才能正常引入vue编译后的js、css文件

改成

assetsPublicPath: '/',

一切正常