Web问题处理汇总

apache部署vue项目后页面加载失败

---

打开index.html查看，里面的css、js路径都是/static/js/manifest.2ae2e69a05c33dfc65f8.js这样的，都是绝对路径开头，所以加载失败。解决这个问题有两个方法：

• 方法1：调整static文件目录
  index.html中css、js的绝对路径的根目录为apache下的htdocs目录，所以只要将dist下的static目录复制到htdocs目录下就可以正常访问了。该方法适合只有一个vue项目的部署，如果有多个vue项目的可以使用方法2。
• 方法2：将绝对路径修改为相对路径
  打开build/webpack.prod.conf.js，找到output节点，增加 publicPath配置

const webpackConfig = merge(baseWebpackConfig, {
    module:{
        ...
    },
    devtool: config.build.productionSourceMap ? config.build.devtool : false,
    output: {
        publicPath: './',
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    } ,
    plugins:[]
})

或者修改config/index.js文件，将build节点中assetsPublicPath的值修改为'./'

module.exports = {
    dev:{
        ....
    }
    build: {
        ...
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        ...
    }
}

参考：https://www.cnblogs.com/LChenglong/p/10309501.html