VUE项目优化

当vue项目开发完成后，将面临上线的问题。
既然要上线，那么速度之类的自然需要优化，以下是项目优化的过程：

开发时期会将’@vue/standard’注释，否则会因为格式问题报很多错，当项目需要上线的时候自然是要取消注释，会出现很多错误。

我们需要给vscode安装插件Vetur 快捷键 Ait+Shift+F但是依旧会将单引号格式化为双引号（双引号报错，单引号为正确格式）

我们需要给vscode进行配置，如下：
加入如下代码：

"vetur.format.defaultFormatter.js":"vscode-typescript"

也可以使用eslint 提供的一个工具，对项目中的所有代码进行格式化。
如果是使用 vue/cli 创建的项目，那这个工具已经安装配置好了。

但是工具会检查 src 目录下的所有文件，一些js代码也会被认为是格式不正确而报错，解决方法如下：
在根目录创建.eslintignore 文件，编辑内容

src/assets

项目上线需要将所有的console移除，如果手动移除的话太麻烦，于是我们需要安装一个插件：babel-plugin-transform-remove-console

安装语句：

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

之后完成文件babel.config.js的配置

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

另一种工具是：
安装：terser-webpack-plugin （基于webpack）

安装命令：

npm install terser-webpack-plugin --save-dev

使用前将babel.config.js中的’plugins: [‘transform-remove-console’]'注释
在根目录下新建webpack.config.js文件

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    terserOptions: {
      compress: {
        drop_console: true
      }
    }
  }
}

使用 babel-plugin-transform-remove-console 插件无论运行npm run build还是运行npm run serve都会删除console语句。
解决方法： 修改 babel.config.js 中的代码

const prodPlugins = []
if (process.env.NODE_ENV == 'productior') {
  prodPlugins.push('transform-remove-console')
}
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [...prodPlugins , "@babel/plugin-syntax-dynamic-import"]
}

可以使用打包工具执行如下命令：

npm run build

也可以在 PowerShell中执行vue ui打开可视化管理界面

如下：

创建入口文件，部署环境

项目在开发阶段和上线以后是不一样的我们需要创建入口文件。将main.js复制分别粘贴在src下新创建的dev_env.js和prod_env.js文件中。

在根目录中新建文件 vue.config.js文件 编辑如下代码：

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

如果当前模式是production 使用./src/prod_env.js
如果当前模式是development 使用./src/dev_env.js