Vue2项目配置@指向src路径方式

在Vue2项目中，@符号通常被用来指向src目录，方便我们在项目的任意位置引用相关文件。

下面是一些步骤可以在Vue2项目中配置@指向src路径：

1. 首先，在项目的根目录下创建一个jsconfig.json文件，该文件的目的是告诉编辑器哪些路径应该被视为“根路径”。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "~/*": ["src/*"]
    }
  }
}

以上是一份基本的jsconfig.json文件。在它的baseUrl选项中指向当前目录，而paths选项则创建了两个确定的别名，@和~。

1. 接下来将webpack配置的alias中的“@”指向“src”。在webpack.config.js的resolve.alias中添加以下代码：

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
}

以上的代码使得在我们使用@时，它会自动被解析成为./src路径。需要安装path模块。

1. 最后，在你的vue组件中可以使用@符号引入相关文件，比如@/components/Header.vue来引入src/components/Header.vue。

<template>
  <div>
    <Header />
    <p>Welcome to my app!</p>
  </div>
</template>

<script>
import Header from '@/components/Header.vue';

export default {
  components: {
    Header,
  },
};
</script>

具体的步骤就是以上所述，实际应用可以根据实际情况进行修改。

下面给出另外两个实例以供参考：

实例1：引用@下的样式和图片资源

1. 在webpack.config.js中添加以下代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          name: '[name].[hash:7].[ext]',
          limit: 8192, // 小于8192字节的图片将会转为base64编码
          outputPath: 'imgs', // 图片输出的路径
        },
      },
      {
        test: /\.(scss|sass|css)$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: ['./src/styles/common.scss'],
            },
          },
        ],
      },
    ],
  },
};

1. 添加vue.config.js文件并设置别名：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "./src/styles/variables.scss";
        @import "./src/styles/mixins.scss";`,
      },
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
  },
};

1. 在组件中引用

<template>
  <div class="home">
    <img :src="imgSrc" />
    <p class="title">{{ msg }}</p>
  </div>
</template>

<script>
import Common from '@/components/Common.vue';
import { imgSrc } from '@/assets/index.js';

export default {
  components: { Common },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      imgSrc,
    };
  },
};
</script>

<style lang="scss">
.title {
  color: $text-color;
  font-size: 16px;
}
</style>

实例2：在vue.config.js中使用@指向src

1. 在项目的根目录下创建一个vue-routes.js文件，该文件的目的是告诉vue-router使用@指向src目录。

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    },
  },
};

1. 在vue.config.js中引入vue-routes.js：

const routes = require('./vue-routes.js');

module.exports = {
  ...routes,
};

1. 在组件中使用@：

<template>
  <div>
    <Header />
    <p>Welcome to my app!</p>
  </div>
</template>

<script>
import Header from '@/components/Header.vue';

export default {
  components: {
    Header,
  },
};
</script>

总之，以上两个实例演示了如何配置@指向src目录。无论哪种方式，注意保持一致性以及代码的可读性和维护性。