Skip to content

[vue] 为什么我们写组件的时候可以写在.vue里呢?可以是别的文件名后缀吗? #331

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] 为什么我们写组件的时候可以写在.vue里呢?可以是别的文件名后缀吗?

Activity

fengyun2

fengyun2 commented on Jul 4, 2019

@fengyun2

也可以写为js,jsx,ts,tsx这种

Myh-cs

Myh-cs commented on Jul 9, 2019

@Myh-cs

配合相应的loader 想咋写就咋写 [手动滑稽.gif]

Cai-zhiji

Cai-zhiji commented on Jul 7, 2023

@Cai-zhiji

.vue是Vue官方定义的约定后缀名,用于标识Vue单文件组件。在Vue项目中,使用.vue后缀可以让开发者更容易地识别和理解文件的作用。一般情况下,不建议将组件的代码分散在不同的文件名后缀中,以遵循Vue的约定和保持项目的一致性。

Webpack配置

如果你使用Webpack作为构建工具,可以通过修改Webpack配置文件来设置文件后缀名。
打开Webpack配置文件(一般是webpack.config.js或vue.config.js),找到相关的配置项。
配置项可以是resolve.extensions,用于指定Webpack解析模块时要尝试的文件后缀名。
例如,将.vue替换为.abc作为Vue组件文件的后缀:

module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.abc'], // 设置文件后缀名
  },
  // ...
};

Vue模板编译配置:

如果你使用Vue的单文件组件,并希望自定义模板文件的后缀名,可以在Vue的模板编译配置中进行设置。
在Vue的配置文件(如vue.config.js)中添加chainWebpack或configureWebpack选项,并使用module.rule配置来修改模板编译规则。
例如,将.html替换为.xyz作为Vue组件模板文件的后缀:

module.exports = {
  // ...
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          // 设置模板文件后缀名
          ...options.compilerOptions,
          fileExtension: '.xyz',
        };
        return options;
      });
  },
  // ...
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@fengyun2@Myh-cs@Cai-zhiji

        Issue actions

          [vue] 为什么我们写组件的时候可以写在.vue里呢?可以是别的文件名后缀吗? · Issue #331 · haizlin/fe-interview