步骤一：修改 vue.config.js 文件

• 查看uniapp项目 根目录下 是否有vue.config.js文件，有则改之，无则创建，配置webpack的别名选项

  const path = require('path');
  
  module.exports = {
      configureWebpack: {
          resolve: {
              alias: {
                  // @指向src目录
          		'@': path.resolve(__dirname, 'src'),
                  // @components指向src/components目录
                  '@components': path.resolve(__dirname, 'src/components'),
                  // @views指向src/views目录
                  '@views': path.resolve(__dirname, 'src/views'),
                  // ... 其他别名
        		}
          }
    	}
  };

步骤二：使用方式

• 在js代码中直接使用别名的写法（直接使用别名）

  // 在一个Vue组件中引用另一个组件
  import MyComponent from '@components/MyComponent.vue';
  
  export default {
    components: {
      MyComponent
    }
  };

• 在模板中引用静态资源（路径前需要加 @/）

  <template>
    <div>
      <img src="@/assets/logo.png" alt="Logo">
    </div>
  </template>