静态资源全路径引入和@引入-CSDN博客

本文链接：https://blog.csdn.net/weixin_45650629/article/details/126830301

该博客介绍了在Taro小程序项目中如何通过配置实现简洁的模块导入。通过创建jsconfig.json文件并设置baseUrl和paths，可以使用@符号进行快捷引用，例如@/assets。同时，在config/index.js中添加alias配置，进一步简化引入路径。这有助于提高代码的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在taro开发的小程序项目中正常情况下我们可以全路径引入，但是如果我们想要更简洁，就可以进行配置然后使用@引入
全路径引入：
import show from “…/…/assets/image/information/show.png”，
./代表当前目录，…/代表父级目录，…/…/代表父级的父级
配置过后引入：
import hide from “@/assets/image/information/hide.png”

配置代码：
1、根目录下创建文件jsconfig.json，代码如下：
在这里插入图片描述

jsconfig.json文件
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "@/assets/*": ["src/assets/*"],
      "@/components/*": ["./src/components/*"],
      "@/service/*": ["./src/service/*"]
    }
  }
}

2、在config文件夹下的index.js文件夹下增加2处内容

//第一处增加开始
const path = require('path');
//结束
const config = {
  projectName: 'study_front',
  date: '2022-8-9',
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  },
  //第二处增加开始
  alias: {
    '@/components': path.resolve(__dirname, '..', 'src/components'),
    '@/assets': path.resolve(__dirname, '..', 'src/assets'),
    '@/pages': path.resolve(__dirname, '..', 'src/pages'),
    '@/service': path.resolve(__dirname, '..', 'src/service'),
    '@/utils': path.resolve(__dirname, '..', 'src/utils'),
    '@/*': path.resolve(__dirname, '..', 'src/*'),
  },
  //结束
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: [],
  defineConstants: {
  },
  copy: {
    patterns: [
    ],
    options: {
    }
  },
  framework: 'react',
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {

        }
      },
      url: {
        enable: true,
        config: {
          limit: 1024 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}