如何打包导入了vue包HTML页面的pc端项目

在项目根目录下创建一个新文件夹，命名为“dist”（distribution的缩写），用于存放打包后的文件。
安装打包工具 webpack 和 webpack-cli。
```
npm install webpack webpack-cli --save-dev
```

在项目根目录下创建一个新文件，命名为“webpack.config.js”，用于配置 webpack 打包规则。

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

mode：指定打包模式，可选值为 development（开发模式）和 production（生产模式）。
entry：指定打包入口文件路径。
output：指定打包输出文件路径和文件名。
module：指定打包规则，比如针对不同类型的文件使用不同的加载器。
resolve：指定 Vue.js 的别名，以便在代码中使用更简短的引用方式。

安装 vue-loader 和 vue-template-compiler。

npm install vue-loader vue-template-compiler --save-dev

在 package.json 文件中添加以下脚本：
```
"scripts": {
    "build": "webpack --config webpack.config.js"
}
```
这样就可以通过运行命令 “npm run build” 来进行打包了。

在 HTML 页面中引入打包后的文件。

<html>
<head>
    <title>My App</title>
</head>
<body>
    <div id="app"></div>
    <script src="dist/bundle.js"></script>
</body>
</html>

运行命令 “npm run build” 进行打包，打包完成后在浏览器中打开 HTML 页面即可看到 Vue.js 应用程序运行的效果。