实现
1、项目优化、打包
2、项目上线
一、项目优化、打包
1、打开vue控制台,项目在serve或build运行阶段会出现报错修改代码。
根据ESLint
的警告提示更改对应的代码
在.prettierrc
文件中更改设置"printWidth":200
, 将每行代码的文字数量更改为200
{
"semi":false,
"singleQuote":true,
"printWidth":200
}
2、执行build
安装插件(babel-plugin-transform-remove-console
),在build阶段去除console打印信息。
打开项目控制台,点击依赖->开发依赖,输入babel-plugin-transform-remove-console
,安装
打开babel.config.js
,编辑代码如下:
//项目发布阶段需要用到的babel插件
const productPlugins = []
//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
//发布阶段
productPlugins.push("transform-remove-console")
}
module.exports = {
"presets": [
"@vue/app"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
],
...productPlugins
]
}
3、生成打包报告
在终端输入vue ui打开vue控制台,
点击“任务”=>“build”=>“运行”
运行完毕之后点击右侧“分析”
,“控制台”
面板查看报告。
这时候就可以看到项目体积减少了一些。
4、修改webpack默认的配置
默认情况下,vue-cli 3.0
生成的项目,隐藏了webpack配置项,如果我们需要配置webpack
需要通过vue.config.js
来配置。
在项目根目录中创建vue.config.js
文件,
module.exports = {
chainWebpack:config=>{
//发布模式
config.when(process.env.NODE_ENV === 'production',config=>{
//entry找到默认的打包入口,调用clear则是删除默认的打包入口
//add添加新的打包入口
config.entry('app').clear().add('./src/main-prod.js')
})
//开发模式
config.when(process.env.NODE_ENV === 'development',config=>{
config.entry('app').clear().add('./src/main-dev.js')
})
}
}
补充:chainWebpack
可以通过链式
编程的形式,修改webpack配置configureWebpack
可以通过操作对象
的形式,修改webpack配置
5、外部加载CDN
默认情况下,依赖项的所有第三方包都会被打包到js/chunk-vendors.******.js
文件中,导致该js文件过大
那么我们可以通过externals排除这些包,使它们不被打包到js/chunk-vendors.******.js
文件中
module.exports = {
chainWebpack:config=>{
//发布模式
config.when(process.env.NODE_ENV === 'production',config=>{
//entry找到默认的打包入口,调用clear则是删除默认的打包入口
//add添加新的打包入口