5.5使用这样就可以自动刷新了
npm run build serve//开启开发服务器，并在浏览器中自动打开应用程序 。没当修改源代码时，会自动重新编译并通知实时刷新将更改反映在浏览器中
vue2打包
1.安装，在终端
npmvue@2 vue-@15 vue--@2 --save-dev
vue安装的版本是2 vue-的15版本，适用于vue2的版本 vue--解析vue模板语法，并转换为js代码会将模板编译成渲染函数，将数据和模板进行绑定，生成最终的HTML输出 。
const path = require('path');const VueLoaderPlugin = require('vue-loader/lib/plugin');//负责解析'vue'文件中的各个部分（模板、脚本、样式）并将其转换为webpack可处理的模块 = require('vue-loader/lib/plugin');//负责解析'vue'文件中的各个部分（模板、脚本、样式）并将其转换为webpack可处理的模块const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成htmlconst MiniCssExtractPlugin = require('mini-css-extract-plugin');//将css打包后的js文件中抽取出来，生成独立的css文件 。通过抽取css到独立的文件可以实现样式的分离和优化 。通过配置入口文件、输出文件、模块解析规则等 。module.exports = {// 1. 指定入口文件entry: './src/main.js',// 2. 指定输出文件output: {path: path.resolve(__dirname, 'dist'),//在这个配置中，所有生成的文件将被输出到该目录下 。//它能够确保生成的路径是标准化的绝对路径，无论在哪个操作系统上运行代码，路径都能够正确解析 。filename: 'main.js',},// 3. 配置模块解析规则module: {rules: [{// 处理.vue文件test: /\.vue$/,loader: 'vue-loader',},{// 处理.js文件, 使用Babel进行转义test: /\.js$/,exclude: /node_modules/,//排除/node_modules/use: {loader: 'babel-loader',},},{// 处理css文件test: /\.css$/,use: [MiniCssExtractPlugin.loader,//将css文件单独处理'css-loader',//加载css文件],},],},// 4. 配置解析别名resolve: {alias: {vue$: 'vue/dist/vue.esm.js',//在引入vue.js时可以使用别名'vue'},},// 5. 配置插件plugins: [new VueLoaderPlugin(), // 处理.vue文件的模块转换为js模块new HtmlWebpackPlugin({ // 根据模板生成html文件，将打包后的脚本的样式自动引入template: './index.html',filename: 'index.html',}),new MiniCssExtractPlugin({ // 将CSS抽取到单独的文件filename: 'style.css',}),],// 6. 配置开发服务器devServer: {//用于配置开发服务器的相关参数，如监听的端口、内容目录等contentBase: path.join(__dirname, 'dist'),compress: true,port: 9000,},};
2.在.json文件中添加或替换
"scripts": {"build": "vue-cli-service build --fix"}
3.在vue..js中添加
publicPath: './'
vue3打包
vue2和vue3之间存在较大的差异，包括编译模板方式、组件注册、API的变化等，因此不能使用vue2的打包项目的方式进行打包vue3；
1.首先在vue3项目的根目录下运行一下命令，安装必要的依赖：
npmvue@next @vue/-sfc vue-@next css- style- file- --save-dev
//意思就是会在项目中的文件夹中安装这些依赖，并且它们将被添加到项目的 .json 文件中的部分，以确保在开发过程中使用这些依赖 。这些依赖的安装将允许你开发 Vue 3 项目并使用进行打包，同时获得 Vue 3 的新特性和优势 。
2.创建配置文件：在项目根目录下创建一个`..js`文件，用于配置 。
const path = require('path'); // 导入 Node.js 的 path 模块，用于处理文件路径const HtmlWebpackPlugin = require('html-webpack-plugin'); // 导入 HtmlWebpackPlugin 插件，用于生成 HTML 文件const { VueLoaderPlugin } = require('vue-loader'); // 导入 VueLoaderPlugin，用于正确编译 Vue 组件module.exports = (env, argv) => {// 通过 argv.mode 获取当前运行的模式（开发模式或生产模式）const isDevelopment = argv.mode === 'development'; // 判断是否是开发模式return {// 指定入口文件的路径，根据你的项目结构进行修改entry: './src/main.js',// 配置输出文件的文件名和输出路径output: {// 在开发模式下，输出文件名为 'bundle.js'，在生产模式下使用带哈希值的文件名filename: isDevelopment ? 'bundle.js' : 'bundle.[contenthash].js',// 输出目录的绝对路径，使用 Node.js 的 path.resolve() 方法解析path: path.resolve(__dirname, 'dist'),},// 配置不同类型文件的处理规则module: {rules: [{// 匹配以 .vue 结尾的文件test: /\.vue$/,// 使用 vue-loader 来处理 Vue 文件loader: 'vue-loader',},{// 匹配以 .css 结尾的文件test: /\.css$/,// 使用 style-loader 和 css-loader 处理样式文件use: ['style-loader', 'css-loader'],},{// 匹配以 .png、.jpg、.jpeg、.gif 和 .svg 结尾的文件test: /\.(png|jpe?g|gif|svg)$/i,// 使用 file-loader 处理图片文件loader: 'file-loader',options: {// 输出的文件名，使用原始文件名和哈希值name: '[name].[hash].[ext]',// 输出的目录，将图片复制到 'dist/images' 目录下outputPath: 'images',},},],},// 配置模块的解析规则resolve: {// 解析文件时自动添加的扩展名，可以在引入文件时省略后缀extensions: ['.js', '.vue'],},// 配置插件plugins: [// 生成 HTML 文件的插件new HtmlWebpackPlugin({// 模板文件路径，根据你的项目结构修改路径template: './public/index.html',}),// VueLoaderPlugin 用于将 Vue 组件正确地编译new VueLoaderPlugin(),],// 配置开发服务器devServer: {// 开启热模块替换功能，实现代码修改时浏览器无刷新更新hot: true,// 打包完成后自动在浏览器中打开应用程序open: true,},// 配置 Source Map，用于在开发和生产模式下进行调试devtool: isDevelopment ? 'eval-cheap-module-source-map' : 'source-map',// 配置优化项optimization: {// 生产模式下开启 Tree Shaking，去除无用的代码usedExports: true,},};};