vue使用cdn加速减少项目体积

最新推荐文章于 2024-03-26 23:58:56 发布

kilito_01

最新推荐文章于 2024-03-26 23:58:56 发布

阅读量619

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/kilito_01/article/details/128923568

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

vue.config.js

const {
	defineConfig
} = require('@vue/cli-service')

// 需要排除的包，对象
let externals = {}

// 判断是否是生产环境
const isProduction = process.env.NODE_ENV === 'production'
// 如果是生产环境，需要执行以下逻辑
if (isProduction) {
	externals = {
		/**
		 * externals对象属性分析：
		 * '包名'：'在项目中引入的名字'**/
		'axios': 'axios',
		'element-ui': 'ELEMENT',
		'vue': 'Vue',
		'vue-router': 'VueRouter',
		'vuex': 'Vuex',
		'vuex-persistedstate': 'createPersistedState'
	}

}



module.exports = defineConfig({
	publicPath: isProduction ? './' : '/',
	transpileDependencies: true,
	configureWebpack: {
		// 打包瘦身
		// 当为开发环境时，externals为空对象
		// 当为生产环境时，externals对象值为排除第三方包，达到瘦身目的
		externals: externals,
	}
	// devServer: {
	//   // 设置代理请求
	//   proxy: {
	//     // 以 api开头
	//     '^/api': {
	//       // 设置代理地址 把基地址禁用
	//       target: ''
	//     }
	//   }
	// }
})

main.js

// import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import permission from './permission'
// 全局样式
import './styles/base.less'

Vue.config.productionTip = false
// 禁用用户通过插件查看vuex数据
Vue.config.devtools = false
new Vue({
  router,
  store,
  permission,
  render: h => h(App)
}).$mount('#app')

main.js 里把导入的vue要注释 vue和router如果加载两遍会报错
element-ui 也不需要引入
都在index.html的模板中都引入了cdn

router.js


const routers = [
  {
  path: '/',
  component: () => import("@/views/home")
  },
  {
    path:'/demo',
    component:() => import('@/views/demo/demo')
  },
  {
    path:'/demo1',
    component:() => import('@/views/demo/demo1')
  }
]

const router = new VueRouter({
  // mode: "history",
  routes:routers
})

export default router

这里我把vue的引入和VueRouter都注销掉了都去掉了
vue.use(VueRouter) 这个也不能要都要注销掉
request.js

// import axios from 'axios'
import store from '@/store'
// 在后端设置了跨域，则设置基地址
const instance = axios.create({
    // 请求基地址
    baseURL: ''
})
// 请求拦截器
instance.interceptors.request.use(
    config => {
        const token = store.getters.token
        if(token){
            config.headers.Authorization = `Bearer ${token}`
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)
// 响应拦截器
instance.interceptors.response.use(
    // response 是服务器响应回来的所有数据
    response => {
        // const { message , success } = response.data
        // if (!success) {
        //     return Promise.reject(new Error(message))
        // }
        return response.data
    },
    error => {
        return Promise.reject(error)
    }
)
export default instance

这里的axios 的引入也注销掉也能正常使用

public 里的index.html

<!DOCTYPE html>
<html lang="">

<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>xxx</title>

	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.12/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
	<script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
	<script src="https://unpkg.com/element-ui@2.15.12/lib/index.js"></script>
    <script src="https://unpkg.com/vuex-persistedstate@4.0.0/dist/vuex-persistedstate.umd.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>

store 中的 index.js

// import Vue from 'vue'
// import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
// Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user,
  },
  getters
})
export default store