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.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目录

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 详解webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置) 执行成功如下图所示: 然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件. 此时我们直接在浏览器中打开index.html,是会报错的,什么都看不到. 2. 安装express-generator生成

  • vue-cli 目录结构详细讲解总结

    一个vue-cli的项目结构如下: 目录 结构预览 ├─build // 保存一些webpack的初始化配置,项目构建 │ ├─build.js // 生产环境构建 │ ├─check-version.js // 检查npm.node版本 │ ├─vue-loader.conf.js // webpack loader配置 │ ├─webpack.base.conf.js// webpack基础配置 │ ├─webpack.dev.conf.js // 开发环境配置,构建本地开发服务器 │ ├─

  • vue本地打开build后生成的dist文件夹index.html问题

    1.问题描述: npm run build 在dist 文件生成了 index 和 static 文件夹,为什么本地打开不了,给后端就能打开? 如何才能像访问 npm run dev 的地址那样访问? 2.种简单方法 2.1 修改配置在本地访问 更改一些路径参数后,然后再次运行npm run build 就可以在本地打开index.html 改哪里? config/index.js文件 build: { assetsPublicPath: '/' } 改成 build: { assetsPubl

  • 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 =

  • vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    1.如果只使用config配置的相关js接口 可采用如下方式引入 执行 npm weixin-sdk-js --save 局部引入 在vue页面中 import wx from 'weixin-sdk-js'; 全局引入 在vue 的main.js 页面中 引入后编写到vue原型链上,然后全局调用 import wx from "weixin-sdk-js"; Vue.prototype.$wx = wx; 2.如果要使用agentConfig配置的相关接口 一定不要执行npm命令引入

  • vue项目中图片懒加载时出现的问题及解决

    目录 vue图片懒加载的问题 vue图片懒加载实现步骤 vue图片懒加载踩过的坑 今天踩过的坑总结 vue图片懒加载的问题 项目中遇到一个问题,记录一下,vue项目中前期没有做图片懒加载的时候,当图片出现错误或者显示路径不对,我加了onerror事件进行错误监听并添加一张默认的图片,优化用户体验. 后期因为图片数量变多,所以加入了图片懒加载,但在懒加载中挂载时只加了loading的图片,没有加error,所以导致页面图片未正常加载的地方出现默认图片闪烁的现象,最后在挂载时加入error引入一张默

  • 在vue项目中(本地)使用iconfont字体图标的三种方式总结

    目录 vue项目中(本地)使用iconfont字体图标 开始使用 vue项目中(本地)使用iconfont字体图标 这里有使用前的准备和三种使用方式介绍,参考这里 还有 vue中手动封装iconfont组件(三种引用方式的封装) 开始使用 点击下载到本地 在了路径 src/assets 下新建文件夹 iconfont ,用来存放字体图标的本地文件 解压下载到本地的字体图标文件,放到 iconfont 文件夹下 如过项目中没有下载 css-loader 依赖包,就进行下载,否则会报错 npm in

  • 在vue项目中如何获取视频的时长

    目录 vue获取视频时长 vue-video-player获取播放时间 全局引用 局部引用 html methods 获取播放时间 vue获取视频时长 传入参数为视频文件对象 js的代码如下: getVideoDuration(file) {   var url = URL.createObjectURL(file);   var audioElement = new Audio(url);   var self = this;   var result;   audioElement.addE

  • 一文教你在现有Vue项目中嵌入Blazor项目

    目录 准备流程 Vue 项目创建流程 Blazor项目创建流程 运行效果 准备流程 Vue 项目创建流程 1.使用Vue创建一个Demo项目 全部选择默认No即可 然后项目名称就用demo了 npm init vue@latest cd demo npm i 安装完成依赖,在项目的根目录找到index.html 添加以下代码即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo

  • 在vue项目中,使用axios跨域处理

    跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无法自己独立的搭建一个服务器,所以就变成了一个尴尬的事情 当然,有很多的虚拟服务器,能够解决跨域问题,他们的实质都是通过后台取与后台沟通,从而委婉的解决跨域问题正好,webpack正有这种功能,所以vue-cli也是有解决跨域的能力 当然,不可能我们直接发送ajax就成功,对吧,我们肯定要修改配置文件 代码: dev: { env: require('./dev.env'), port: 8080, a

  • vue项目中的webpack-dev-sever配置方法

    问题描述:在vue项目中运行npm run dev启动服务器,然而在同一个局域网下的外部设备不能该服务器 解决方案:在项目的config文件夹下找到index .js中的host把默认的localhost更改为0.0.0.0, 然后外部设备就可以访问该项目启动的服务了(注意必须是在统一局域网下) 以上这篇vue项目中的webpack-dev-sever配置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vscode下vue项目中eslint的使用方法

    前言 在vscode的vue项目中,关于代码检查和格式化,遇到各种各样的问题,比如: 不清楚安装的拓展的功能,导致安装了重复功能的拓展 右键格式化文档的时候,不是按eslint的规则来格式化,导致需要我再次手动调整 保存时不能自动修复代码 以下通过自己的实践,进行了相应配置,目前可以实现: 仅安装2个推荐的拓展 右键格式化文档按照eslint规则,不会产生错误 保存时自动修复代码 vscode 拓展安装 eslint 拓展 该拓展本身不带任何插件,当前项目要使用该拓展,需要安装相应的npm包(全

  • 在vue项目中引用Antv G2,以饼图为例讲解

    我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: <template> <div id="pieChart"></div> </template> js部分: ​//引入G2组件 import G2 from "@antv/g2"; ​ export default { name:"", //数据部分 data(){ retur

随机推荐