Vue2项目打包部署至Apache子目录后静态图片无法加载如何解决

解决方案 #

问题根源是项目部署在Apache的/test子目录下，默认构建配置的公共路径匹配根目录，导致静态资源路径错误。按以下步骤调整即可：

1. 修改Vue项目构建公共路径

• 若使用vue-cli 2.x版本：找到项目下config/index.js文件，修改build配置节点的assetsPublicPath参数：

build: {
  // 原有配置保留，仅修改assetsPublicPath为子目录路径
  assetsPublicPath: '/test/',
}

• 若使用vue-cli 3.x及以上版本：在项目根目录新建vue.config.js文件，添加如下配置：

module.exports = {
  // 生产环境用子目录路径，开发环境保持根路径不影响本地调试
  publicPath: process.env.NODE_ENV === 'production' ? '/test/' : '/'
}

配置完成后重新执行npm run build打包。

2. 修正.htaccess重写规则

原配置最后一行重定向未匹配子目录，修改为以下内容：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /test/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /test/index.html [L]
</IfModule>

3. 调整部署目录结构

不要在test目录下保留外层dist文件夹，将打包后dist目录内的所有文件直接放到Apache的test子目录下，最终目录结构如下：

/test
  - build.js
  - build.js.map
  - logo.png
  - index.html
  - .htaccess

调整完成后刷新页面即可正常加载图片。

内容的提问来源于stack exchange，提问作者jose angarita