在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'))
}