vue+element-ui商城后台管理系统(day05-06) (3)

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

5.5 configureWebpack与chainWebpak

configureWebpack通过操作对象

chainWebpak通过链式编程

来达到修改webpack配置

通过chanin实现改变开发与发布模式的入口函数

module.exports = { chaninWebpack: config => { config.when(progress.enc.MODE_ENV === \'production\', config => { config.entry(\'app\').clear().add(\'./src/main-prod.js\') }) config.when(progress.enc.MODE_ENV === \'development\', config => { config.entry(\'app\').clear().add(\'./src/main-dev.js\') }) } }

实现CDN打包资源

通过externals加载外部CDN资源

{}中如果有axios: \'axios\'的话就会查找index.html

element打包规则:

不同上面方法要在externals中加入elementui属性

直接在index.html中加入就可

css文件同理

5.6 开发与发布时候title不同名操作

通过在vue.config.js中加入自定义属性

config.plugin(\'html\').tap(args => { args[0].isProd = true return args // 记得要return args })

在index.htm的title中使用判断语句<%= htmlWebpackPlugin.options.isProd ? \'\' : \'dev -\' %>

5.7 路由懒加载

①安装@babel/plugin-syntax-dynamic-import

②babel.config.js配置声明插件

③讲路由改为按需加载的形式

const Foo = () => import(...) 这样已经是按需加载

const Foo = () => import(/* webpackChunkName: "group-one" */...)来实现按组划分

5.8 node部署压缩 const compression = require(\'compression\') app.use(compression()) 六. 项目上线 6.1 项目打包

发现build完全部需要导入的文件都Failed to load resource: net::ERR_FILE_NOT_FOUND

问题: 我写的是相对路径倒是被解析成绝对路径

解决办法: 在vue.cnfig.js中加入

module.expots = { publicPath: \'./\', }

6.2 申请https

配置HTTPS服务

申请SSL证书(https://freessl.org)

.jpg)]

const https = require(\'https\') const fs = require(\'fs\') const options = { cert: fs.readFileSync(\'.pem\') key: fs.readFileSync(\'.key\') } // 443 https默认端口 https.createSetver(options, app).listen(443) 6.3 用PM2托管