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: './',
...
}
}
网友评论