学习笔记
<!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.title %></title>
<!-- Bootstrap .css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!--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,必须先于Element引入 -->
<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>
<!-- 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>
2.在 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'
})
})
//开发模式 找 mian-dev.js 进入入口文件打包
config.when(process.env.NODE_ENV === 'development', config => {
config
.entry('app')
.clear()
.add('./src/main-dev.js')
})
}
}
3.去掉mian.js中的相关样式 和js
注意：element-ui 全部去掉 其他的去掉css文件即可 因为vue 和 vuerouter 页面都需要用到 不能去掉的 会报错
// vue 模块
// import ElementUI from 'element-ui'
// vuecss
// import 'element-ui/lib/theme-chalk/index.css'
// 全局注册 vue
// Vue.use(ElementUI)
思路：
1.使用externals设置排除项
2. 像vue这种 直接去掉了全局注册 和引用的 就不用在设置externals 排除了
3.vue和vue-router和axios需要设置externals，但是mian.js（如何设置了开发阶段，在mian-prod.js）中不用去掉，引入 因为他们都vue的必需品，页面加载就需要调用的 去掉就会报错
发表评论