在Windows10系统下,自定义打包整个Vue文件夹项目的相关配置项涉及以下内容:
-
安装Node.js和npm
- Node.js官网:https://nodejs.org/en/download/
- npm是Node.js的包管理工具,在Node.js安装后会自带安装
-
创建Vue项目
- 使用Vue CLI 3.x创建项目,具体命令如下:
vue create my-project
-
配置打包相关项
- 安装webpack和webpack-cli,具体命令如下:
npm install webpack webpack-cli --save-dev
- 在根目录下创建webpack.config.js文件,该文件用于配置打包相关项,具体代码如下:
const path = require('path'); module.exports = { entry: './src/main.js', // 入口文件 output: { // 输出配置 path: path.resolve(__dirname, 'dist'), // 输出目录 filename: 'bundle.js' // 输出文件名 }, module: { // 模块配置 rules: [ // 规则 { test: /\.vue$/, // 匹配.vue文件 loader: 'vue-loader' // 使用vue-loader处理 }, { test: /\.js$/, // 匹配.js文件 loader: 'babel-loader', // 使用babel-loader处理 exclude: /node_modules/ // 排除node_modules目录 }, { test: /\.(png|jpg|gif)$/, // 匹配图片文件 loader: 'url-loader', // 使用url-loader处理 options: { limit: 8192, // 小于8KB的图片转为base64编码 name: '[name].[ext]', // 输出文件名 outputPath: 'images/' // 输出目录 } } ] } };
- 在package.json文件中添加打包命令,具体代码如下:
"scripts": { "build": "webpack --mode production" }
-
运行打包命令
- 在终端中执行以下命令即可进行打包:
npm run build