在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