当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