欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項目中使用rimraf?dev啟動時刪除dist目錄方式

 更新時間:2022年04月06日 08:39:05   作者:yangdongnan  
這篇文章主要介紹了vue項目中使用rimraf?dev啟動時刪除dist目錄方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

使用rimraf dev啟動時刪除dist目錄

適用 vue 2.x vue 3.x已經(jīng)會在啟動時自動刪除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.HOST
const 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 development
  devtool: config.dev.devtool,
  // these devServer options should be customized in /config/index.js
  devServer: {
    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 FriendlyErrorsPlugin
    watchOptions: {
      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-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ]),
  ]
})
module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port
      // Add FriendlyErrorsPlugin
      devWebpackConfig.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目錄

前后端分析之后,前端 打包處理 

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。 

相關(guān)文章

  • vue+Element-ui實現(xiàn)分頁效果實例代碼詳解

    vue+Element-ui實現(xiàn)分頁效果實例代碼詳解

    這篇文章主要介紹了vue+Element-ui實現(xiàn)分頁效果 ,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-12-12
  • vue實現(xiàn)多個tab標(biāo)簽頁的切換與關(guān)閉詳細(xì)代碼

    vue實現(xiàn)多個tab標(biāo)簽頁的切換與關(guān)閉詳細(xì)代碼

    這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)多個tab標(biāo)簽頁的切換與關(guān)閉的相關(guān)資料,使用vue.js實現(xiàn)tab切換很簡單,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
    2023-10-10
  • Vue實戰(zhàn)之掌握自定義指令

    Vue實戰(zhàn)之掌握自定義指令

    作為使用Vue的開發(fā)者,我們對Vue指令一定不陌生,諸如v-model、v-on、v-for、v-if等,同時Vue也為開發(fā)者提供了自定義指令的api,熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率,讓我們可以節(jié)省時間開心的摸魚
    2022-11-11
  • vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作

    vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作

    這篇文章主要介紹了vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue2.0 elementUI制作面包屑導(dǎo)航欄

    vue2.0 elementUI制作面包屑導(dǎo)航欄

    本篇文章主要給大家詳細(xì)代碼講解了vue2.0 elementUI制作面包屑導(dǎo)航欄的過程,對此有興趣的朋友可以學(xué)習(xí)下。
    2018-02-02
  • 基于Vue3實現(xiàn)無限滾動組件的示例代碼

    基于Vue3實現(xiàn)無限滾動組件的示例代碼

    如果你在社交媒體上停留的時間過長,那么,你所在的網(wǎng)站很可能正在使用無限滾動組件。這篇文章教你利用Vue3實現(xiàn)無限滾動組件,感興趣的可以參考一下
    2022-09-09
  • 淺談Vue.js 中的 v-on 事件指令的使用

    淺談Vue.js 中的 v-on 事件指令的使用

    這篇文章主要介紹了淺談Vue.js 中的 v-on 事件指令的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • Vue+Element-ui日歷排班自定義實例代碼

    Vue+Element-ui日歷排班自定義實例代碼

    這篇文章主要給大家介紹了關(guān)于Vue+Element-ui日歷排班自定義的相關(guān)資料,有現(xiàn)成的日歷插件但是不符合需求,所以項目中使用vue+element的表格組件自己實現(xiàn)一個日歷組件,需要的朋友可以參考下
    2023-09-09
  • 詳解vue3中虛擬列表組件的實現(xiàn)

    詳解vue3中虛擬列表組件的實現(xiàn)

    這篇文章主要為大家詳細(xì)介紹了vue3中實現(xiàn)虛擬列表組件的相關(guān)知識,包含加載更多以及l(fā)oading狀態(tài),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下
    2023-10-10
  • 全面詳解vue種數(shù)組去重的12種方法示例

    全面詳解vue種數(shù)組去重的12種方法示例

    這篇文章主要介紹了vue數(shù)組去重的12種方法示例全面詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07

最新評論