vue用通过npm的webpack打包编译，这样更适合灵活配置的项目

如果你不想使用 Vue CLI，也可以直接通过 npm 安装 Vue，然后手动配置项目。

创建一个新的项目目录，例如my-vue-project，并进入该目录。

初始化项目

在项目目录下运行以下命令初始化项目：

bash 复制代码

npm init -y

这会生成一个package.json文件，用于定义项目的依赖和脚本。

安装 Vue

在项目目录下运行以下命令安装 Vue：

bash 复制代码

npm install vue@2

这里安装的是 Vue 2。如果你需要安装 Vue 3，可以改成vue@next 即为vue3

配置项目（以 Webpack 为例）

安装 Webpack 和相关依赖：

bash 复制代码

npm install webpack webpack-cli

确保 vue-loader 和 vue-template-compiler 的版本匹配

vue-loader 和 vue-template-compiler 的版本需要保持一致，否则可能会导致兼容性问题。确保你安装的版本与 Vue 的版本匹配。例如，如果你使用的是 Vue 3，应该安装对应的 vue-loader 和 vue-template-compiler 版本。

vue-loader 的版本：

vue-loader@17.4.2。vue-loader v17 是专为 Vue 3 设计的，我们使用的是 Vue 2 (vue 和 vue-template-compiler 的版本是 ^2.7.16)。

Vue 2 项目应该使用 vue-loader v15 或 v16，而不是 v17。

vue 和 vue-template-compiler 的版本：

Vue 2 (^2.7.16) 与 vue-template-compiler ^2.7.16 匹配，但需要确保 vue-loader 的版本与之兼容。

Vue 项目中，vue-loader 和 vue-template-compiler 的版本需要匹配，否则可能会导致兼容性问题。如果发现版本不匹配，可以通过以下命令更新它们：

bash 复制代码

npm install vue-loader@15.10.0 vue-template-compiler@2.7.0 --save-dev

如果你使用 Vue 3，确保安装与 Vue 3 兼容的版本：

bash 复制代码

npm install vue-loader@16 vue-template-compiler@3 --save-dev

Webpack 的版本：

Webpack 5 (^5.99.8)，这是最新的版本，通常与 Vue 3 项目更兼容。

如果你的项目是基于 Vue 2，建议使用 Webpack 4，因为 Vue 2 项目通常与 Webpack 4 的兼容性更好。

降级 vue-loader 到兼容 Vue 2 的版本

如果你的项目是基于 Vue 2，应该使用 vue-loader v15 或 v16。以下是降级 vue-loader 的步骤：

bash 复制代码

npm uninstall vue-loader
//如果你不用降级直接用下面这句安装
npm install vue-loader@15 --save-dev

或者，如果你希望使用 vue-loader v16（虽然 v16 主要用于 Vue 3，但也可以兼容 Vue 2）：

bash 复制代码

npm uninstall vue-loader
//如果你不用降级直接用下面这句安装
npm install vue-loader@16 --save-dev

如果你的项目是基于 Vue 2，建议使用 Webpack 4，因为 Vue 2 项目通常与 Webpack 4 的兼容性更好。以下是降级 Webpack 的步骤：

bash 复制代码

npm uninstall webpack webpack-cli
//如果你不用降级直接用下面这句安装
npm install webpack@4 webpack-cli@3 --save-dev

建议：

Vue 2 项目：建议使用 vue-loader v15 或 v16，以及 Webpack 4。

Vue 3 项目：建议使用 vue-loader v17 和 Webpack 5。

4.安装必要的加载器

你需要安装 css-loader 和 vue-style-loader，以确保 Webpack 能够正确处理 .vue 文件中的

确认 css-loader 和 vue-style-loader 的版本

对于 Vue 2.7 项目，css-loader 和 vue-style-loader 的版本也需要确保兼容。通常，以下版本是兼容的：

css-loader: ^5.0.0（适用于 Webpack 4）

vue-style-loader: ^4.0.0（适用于 Webpack 4）

运行以下命令来安装这些依赖：

bash 复制代码

npm install css-loader@5 vue-style-loader@4 --save-dev

安装 babel-loader

运行以下命令来安装 babel-loader 及其相关依赖

bash 复制代码

npm install babel-loader@8 --save-dev

babel-loader v8 是与 Webpack 4 兼容的版本。

确保安装了 @babel/core 和 @babel/preset-env

babel-loader 依赖于 @babel/core，并且通常需要一个预设（preset）来转换 ES6+ 代码。确保你已经安装了这些依赖：

bash 复制代码

npm install @babel/core @babel/preset-env --save-dev

最后webpakc.config.js的配置文件应该是这样的

javascript 复制代码

const path=require('path');
const {VueLoaderPlugin}=require('vue-loader');

module.exports={
    mode:'development',
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:'/node_modules/',
                options:{
                    presets:['@babel/preset-env']
                }
            },
            {
                test:/\.css$/,
                use:[
                    'vue-style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin()
    ],
    resolve:{
        extensions:['.js','.vue'],
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        }
    }
}

在package.js文件中添加"build": "webpack",如下：

json 复制代码

{
  "name": "xuevue",
  "version": "1.0.0",
  "main": "/src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev":"vite"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "vue": "^2.7.16",
    "vue-template-compiler": "^2.7.16"
  },
  "devDependencies": {
    "@babel/core": "^7.27.1",
    "@babel/preset-env": "^7.27.2",
    "babel-loader": "^8.4.1",
    "css-loader": "^5.2.7",
    "vue-loader": "^15.11.1",
    "vue-style-loader": "^4.1.3",
    "webpack": "^4.47.0",
    "webpack-cli": "^3.3.12"
  }
}

运行 Webpack

运行 Webpack 构建命令：

在运行命令之前将你的代码如：.vue后缀的文件，即主文件main.js放入src中

bash 复制代码

npm run build

运行后即在dist文件夹中生成了bundle.js，将这个文件写入一个html中,就可以访问你用webpack打包编译后的文件，

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue App</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/dist/bunble.js"></script>
</body>
</html>

当然在开发中一般用vite来热重载，不必用webpack去编译后才能看到效果