学习笔记
1. 配置 开发阶段 和 发布阶段 入口文件的打包
①，在项目根目录创建 一个 vue.config.js （有vue.config.js有不用创建）
②，在创建 mian-prod.js做发布阶段入口文件 和 mian-dev.js 做 开发模式入口阶段文件（最好mian.js保存一份以免出bug，方便及时对比修复） 就是把 mian.js复制两份 改成mian-prod.js 和mian-dev.js
③，写入如下代码 （代码写的这么简单 应该看的懂吧）
module.exports = {
chainWebpack: config => {
//发布模式 找main-prod.js 进行入口文件打包
config.when(process.env.NODE_ENV === 'production', config => {
//entry找到默认的打包入口，调用clear则是删除默认的打包入口
//add添加新的打包入口
config
.entry('app')
.clear()
.add('./src/main-prod.js')
})
//开发模式 找 mian-dev.js 进入入口文件打包
config.when(process.env.NODE_ENV === 'development', config => {
config
.entry('app')
.clear()
.add('./src/main-dev.js')
})
}
}
2.去掉console.log
①，在项目根目录找到babel.config.js
②，需要安装插件 babel-plugin-transform-remove-console 插件 如果是 yarn管理包 就 yarn add 包名
npm install babel-plugin-transform-remove-console -S
③，写入如下代码
思路：其实就判断是否是发布模式 然后是发布模式就 把插件名称添加到 plugins中去 然后 插件自动清除页面中 console.log
const plugins = ['@vue/babel-plugin-transform-vue-jsx']
// 生产环境移除console
if (process.env.NODE_ENV === 'production') {
plugins.push('transform-remove-console')
}
module.exports = {
plugins: plugins,
presets: [
[
'@vue/app',
{
modules: false,
targets: {
browsers: [
'> 1%',
'last 2 versions',
'not ie <= 8',
'Android >= 4',
'iOS >= 8'
]
},
useBuiltIns: 'entry'
}
]
]
}
如果配置完发现有问题就 记住我这是适合我的项目的，如何你们自己的项目配置文件里面的内容不用删了，把我代码读懂 结合进去
const plugins = ['@vue/babel-plugin-transform-vue-jsx']
// 生产环境移除console
if (process.env.NODE_ENV === 'production') {
plugins.push('transform-remove-console')
}
module.exports = {
plugins: plugins
// presets: [
// [
// '@vue/app',
// {
// modules: false,
// targets: {
// browsers: [
// '> 1%',
// 'last 2 versions',
// 'not ie <= 8',
// 'Android >= 4',
// 'iOS >= 8'
// ]
// },
// useBuiltIns: 'entry'
// }
// ]
// ]
}
3.VUE中CDN加速
①在vue项目中找 vue.config.js 中 使用 externals 做排除打包项
module.exports = {
chainWebpack: config => {
//发布模式 找main-prod.js 进行入口文件打包
config.when(process.env.NODE_ENV === 'production', config => {
//entry找到默认的打包入口，调用clear则是删除默认的打包入口
//add添加新的打包入口
config
.entry('app')
.clear()
.add('./src/main-prod.js')
// 使用externals设置排除项
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios'
})
})
//开发模式 找 mian-dev.js 进入入口文件打包
config.when(process.env.NODE_ENV === 'development', config => {
config
.entry('app')
.clear()
.add('./src/main-dev.js')
})
}
}
②在mian.js中（也就是入口文件，刚刚配置的入口是main-prod.js） 在main-prod.js中注释掉element-ui即可（因为需要cdn引入element-ui在入口文件中不用加载所以 可以全部注释掉，但是vue和vuerouter在入口文件中都有加载所有不能注释掉，axios也不能注释掉发送请求你用）
// vue 模块
// import ElementUI from 'element-ui'
// vuecss
// import 'element-ui/lib/theme-chalk/index.css'
// 全局注册 vue
// Vue.use(ElementUI)
注意引入顺序 先css 在js 还有其他的顺序（比如：先jq在bootstrap 其他的自行研究）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>天堂寨官网</title>
<!--animate css3动画-->
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
<!-- emlement-ui -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css">
<!-- 引入Vue -->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<!-- vue-router -->
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://unpkg.com/element-ui@2.3.7/lib/index.js"></script>
<!-- axios -->
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<!-- Bootstrap .css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4.配置首页内容 控制在发布阶段引入外部cdn 和开发阶段不引入外部cdn
①，在vue.config.js中通过插件设置 参数
module.exports = {
chainWebpack: config => {
//发布模式 找main-prod.js 进行入口文件打包
config.when(process.env.NODE_ENV === 'production', config => {
//entry找到默认的打包入口，调用clear则是删除默认的打包入口
//add添加新的打包入口
config
.entry('app')
.clear()
.add('./src/main-prod.js')
// 使用externals设置排除项
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios'
})
//使用插件
config.plugin('html').tap(args => {
//添加参数isProd
args[0].isProd = true
return args
})
})
//开发模式 找 mian-dev.js 进入入口文件打包
config.when(process.env.NODE_ENV === 'development', config => {
config
.entry('app')
.clear()
.add('./src/main-dev.js')
//使用插件
config.plugin('html').tap(args => {
//添加参数isProd
args[0].isProd = false
return args
})
})
}
}
②，在public/index.html中使用在vue.config.js中添加的参数 isProd 通过判断 isProd实现 是否引入外部cdn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>天堂寨官网</title>
<% if(htmlWebpackPlugin.options.isProd){ %>
<!--animate css3动画-->
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
<!-- emlement-ui -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css">
<!-- 引入Vue -->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<!-- vue-router -->
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://unpkg.com/element-ui@2.3.7/lib/index.js"></script>
<!-- axios -->
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<% } %>
<!-- Bootstrap .css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
发表评论