vue项目中使用rimraf|vue项目中使用rimraf dev启动时删除dist目录方式
目录
- 使用rimraf dev启动时删除dist目录
- vue修改dist目录
使用rimraf dev启动时删除dist目录 适用 vue 2.x vue 3.x已经会在启动时自动删除dist目录
webpack.dev.conf.js
'use strict'const utils = require('./utils')const webpack = require('webpack')const config = require('../config')const merge = require('webpack-merge')const rm = require('rimraf')const path = require('path')const baseWebpackConfig = require('./webpack.base.conf')const CopyWebpackPlugin = require('copy-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')const portfinder = require('portfinder')//删除dist目录rm(path.resolve(__dirname, '../dist'),err =>{if(err) throw err})const HOST = process.env.HOSTconst PORT = process.env.PORT && Number(process.env.PORT)const devWebpackConfig = merge(baseWebpackConfig, {module: {rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })},// cheap-module-eval-source-map is faster for developmentdevtool: config.dev.devtool,// these devServer options should be customized in /config/index.jsdevServer: {clientLogLevel: 'warning',historyApiFallback: {rewrites: [{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },],},hot: true,contentBase: false, // since we use CopyWebpackPlugin.compress: true,host: HOST || config.dev.host,port: PORT || config.dev.port,open: config.dev.autoOpenBrowser,overlay: config.dev.errorOverlay? { warnings: false, errors: true }: false,publicPath: config.dev.assetsPublicPath,proxy: config.dev.proxyTable,quiet: true, // necessary for FriendlyErrorsPluginwatchOptions: {poll: config.dev.poll,}},plugins: [new webpack.DefinePlugin({'process.env': require('../config/dev.env')}),new webpack.HotModuleReplacementPlugin(),new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.new webpack.NoEmitOnErrorsPlugin(),// https://github.com/ampedandwired/html-webpack-pluginnew HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true}),// copy custom static assetsnew CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.dev.assetsSubDirectory,ignore: ['.*']}]),]})module.exports = new Promise((resolve, reject) => {portfinder.basePort = process.env.PORT || config.dev.portportfinder.getPort((err, port) => {if (err) {reject(err)} else {// publish the new Port, necessary for e2e testsprocess.env.PORT = port// add port to devServer configdevWebpackConfig.devServer.port = port// Add FriendlyErrorsPlugindevWebpackConfig.plugins.push(new FriendlyErrorsPlugin({compilationSuccessInfo: {messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],},onErrors: config.dev.notifyOnErrors? utils.createNotifierCallback(): undefined}))resolve(devWebpackConfig)}})})
vue修改dist目录 前后端分析之后,前端 打包处理
文章图片
文章图片
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
推荐阅读
- vue实现简单分页功能
- Vue中使用crypto-js|Vue中使用crypto-js AES对称加密算法实现加密解密
- Vue的props配置项详解
- 详解Vue项目的打包方式(生成dist文件)
- vue使用Vuex状态管理模式
- vite + Vue3 + TS
- SpringCloud项目的log4j2漏洞解决方案详解流程
- vue跳转页面打开新窗口|vue跳转页面打开新窗口,并携带与接收参数方式
- Java毕业设计项目实战篇|Java项目:YY酒店管理系统(java+JSP+Easyui+Echars+ssm+mysql)
- 分享|分享 15 个 Vue3 全家桶开发的避坑经验