uniapp-cli 如何自定义静态文件

在使用uniapp-cli开发项目时，如何自定义静态文件（如图片、字体等）的存放路径？官方文档中静态文件默认放在static目录下，但我想修改这个默认路径或者添加额外的静态资源目录，应该如何配置？需要注意哪些兼容性问题？

2 回复

在 vue.config.js 中配置 copy-webpack-plugin，将静态文件复制到输出目录。例如：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        { from: 'static', to: 'static' }
      ])
    ]
  }
}

这样就能把项目根目录的 static 文件夹内容打包到输出目录。


在 UniApp CLI 项目中，自定义静态文件主要通过以下步骤实现：

  1. 静态文件存放位置
    将静态文件（如图片、字体、JSON 等）放置在项目根目录的 static 文件夹中（如 static/images/logo.png）。

  2. 引用静态文件
    在代码中通过绝对路径或相对路径引用：

    • 模板/样式：直接使用 /static/ 开头的绝对路径（编译后会自动处理）：
      <image src="/static/images/logo.png"></image>

      .bg {
  background: url('/static/images/bg.png');
}
    • JS 逻辑：使用相对路径（需注意路径层级）：
      const config = require('../../static/data/config.json');

  3. 注意事项

    • 仅 static 目录下的文件会被直接复制到输出目录，其他目录需通过构建工具配置。
    • 生产环境需确保服务器正确配置静态资源访问权限。

  4. 扩展配置（如 Vue CLI 插件）
    若需自定义目录，可通过 vue.config.js 修改 Webpack 配置（仅支持 HBuilderX 外的自定义模板）：

    module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('static')
      .test(/\.(png|jpe?g|gif|svg)$/)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'custom-static/[name].[ext]'
      });
  }
};

总结：优先使用默认 static 目录，按规则引用即可满足大部分需求。

回到顶部