Vue.js访问应用外部服务器文件失败，构建时提示模块找不到错误

问题原因 #

Vue项目构建（执行npm run build）时，webpack仅处理项目根目录范围内的文件。你直接用require('/var/www/files/myfile.jpg')引用服务器其他目录的绝对路径文件，webpack无法在构建上下文里定位到该文件，因此抛出找不到模块的错误。而public/是webpack默认的静态资源目录，会被完整复制到构建产物中，所以文件放在这里能正常访问。

解决方案 #

方案1：通过Web服务器映射外部文件目录（推荐用于大文件/动态更新文件） #

无需修改前端代码，通过Nginx等服务器配置将外部目录映射为可访问的URL路径：

1. 配置Nginx，将/var/www/files/映射为/server-files/路径：

location /server-files/ {
    alias /var/www/files/;
    autoindex off; # 关闭目录索引，防止暴露文件列表
}

2. 前端直接使用该URL作为下载链接：

<a href="/server-files/myfile.jpg" download>下载文件</a>

方案2：在public目录创建软链接指向外部文件 #

让webpack识别文件路径的同时，保留文件在原服务器目录的存储：

1. 进入Vue项目的public目录：

cd ~/Dev/app/public

2. 创建软链接：

ln -s /var/www/files server-files

3. 前端通过相对路径引用：

<a href="/server-files/myfile.jpg" download>下载文件</a>

Windows系统需用命令：mklink /D server-files C:\var\www\files创建目录软链接

方案3：修改webpack配置复制外部文件（适合小体积静态文件） #

配置webpack在构建时将外部文件复制到产物目录：

1. Vue CLI项目中，在vue.config.js添加copy-webpack-plugin配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: '/var/www/files/myfile.jpg', to: 'server-files/' }
        ]
      })
    ]
  }
};

2. 前端引用构建后的路径：

<a href="/server-files/myfile.jpg" download>下载文件</a>

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