美文网首页
Web问题处理汇总

Web问题处理汇总

作者: 菜鸟虫子 | 来源:发表于2020-08-06 11:19 被阅读0次

    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

    相关文章

      网友评论

          本文标题:Web问题处理汇总

          本文链接:https://www.haomeiwen.com/subject/iilzrktx.html