超全！Vue3 项目打包从依赖安装到完成部署的详细教程

Vue3 项目打包教程 1. 安装依赖 首先确保你的项目中已经安装了以下依赖： - vue-cli - webpack - webpack-cli - vue-loader - css-loader - sass-loader - postcss-loader 2. 创建 Vue3 项目 使用 vue-cli 创建一个 Vue3 项目： ```bash vue create my-project ``` 选择 Vue3 作为默认版本。 3. 配置 webpack 在项目根目录下找到 `vue.config.js` 文件，如果没有则创建一个。在该文件中添加以下内容： ```javascript const path = require('path'); module.exports = { outputDir: path.resolve(__dirname, 'dist'), publicPath: './', }; ``` 4. 配置 webpack 插件 在项目根目录下创建一个名为 `webpack.config.js` 的文件，并添加以下内容： ```javascript const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', }), }, }; ``` 5. 配置 package.json 在 `package.json` 文件中的 `scripts` 部分添加以下内容： ```json "scripts": { "build": "vue-cli-service build", } ``` 6. 运行打包命令 在项目根目录下运行以下命令进行打包： ```bash npm run build ``` 打包完成后，生成的静态文件将位于 `dist` 目录下。 ######[AI写代码神器 | 501点数解答 | 2024-05-29 11:45:59]