vue编译后的dist部署到带有二级目录服务器后无法加载资源问题解决

问题描述

Vue项目编译后，生成的dist文件夹下的资源文件，部署到服务器后，如果是http://www.example.com/这样的路径，是没有问题的；但是如果部署到二级目录后，例如 http://http://www.example.com/vue/后，就会发生问题，通过浏览器右键-检查 发现网页加载css和js都是从http://www.example.com/app.xxxx.js 或者http://www.example.com/app.xxxx.css 这样的，显然vue下的资源文件的加载的相对路径，还是按照一级目录（根路径）来加载的。

问题解决

项目根目录（和package.json同一层）新建vue.config.js

设置publicPath: ''，如下：

module.exports = {
    publicPath: '',
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            }
        }
    }
};

问题顺利解决