vue项目打包优化

移除console语句

1. 上线之后不再需要console语句，使用build命令打包时，需要将console语句进行删除，**使用命令下载babel的一个插件，

npm install babel-plugin-transform-remove-console --save-dev

2. 然后在项目的根目录下的babel.config.js文件中配置

module.exports = {
   
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [...prodPlugins]
}

3. 虽然这种方法执行命令就会移除掉，但是在开发阶段运行npm run serve命令时也会移除，所以就应该判断一下是开发环境还是生产环境，修改一下babel.config.js的配置

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
   
  prodPlugins.push('transform-remove-console')
}

开发环境和部署环境

项目开发阶段和生成环境可能不一样，开发阶段配置也会比较随意 ，等到上线之后再进行手动修改既繁琐又麻烦还很容易出错。
解决方法：使用两个入口文件，一个 用于开发环境，另一个用于生产环境

1. 创建入口文件

在 src 目录下新建 prod_env.js 和 dev_env.js
将main.js 中代码分别拷贝到这两个文件中，并删除 main.js

2. 配置打包时的入口文件

项目根目录下新建 vue.config.js

编写以下代码

module.exports={
   
    chainWebpack:config=>{
   
        config.when(process.env.NODE_ENV === 'production',config=>{
   
            config.entry('app').clear().add('./src/prod_env.js')
        }