1. 使用cdn
public目录下index.html
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
cdn引入最好写在body上面 否则打包后会出现 xxx is notdefined
2. 删除main.js的important xxx from xxx 与 Vue.use() 不删除的话打包还是会打包这些模块,打包后chunk-vendors.6bf9f4fc.js文件过大一般是这个原因
注意不要误删引入的本地模块
import App from './App.vue'
import components from '@/utils/components.js'
Vue.use(components)
Vue.prototype.$http = axios
import store from './store/index'
import router from './router/index'
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,
store,
}).$mount('#app')
3. 根目录下新建vue.config.js文件
module.exports = {
lintOnSave: false,
//runtimeCompiler: true,
publicPath: './', // 设置打包文件相对路径
configureWebpack: {
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'element-ui': 'ELEMENT',
'echarts': 'echarts' // 配置使用CDN
}
},
devServer: {
// open: process.platform === 'darwin',
// host: 'localhost',
//去除eslint
overlay: {
warnings: false,
errors: false
},
},
}
publicPatn默认的路径是 “/” 但是打包后打开index.html会出现Failed to load resource: net::ERR_FILE_NOT_FOUND的错误
这里需要改成 "./"
在配置路由表的时候 需要设置路由为 hash模式 否则打包后打开index.html会默认跳到你设置的404页面
4. 路由懒加载
路由表内
{
// 登录页
path: '/login',
name: 'login',
component: resolve => (require(["@/pages/login/login"], resolve))
},
组件内引用
components:{
Sidebar:() => import("../../components/Sidebar")
},
打包命令
npm run build --report
大概300多kb