Vue2.x --SPA单页应用hash和history路由模式、vue-cli打包时采用CDN模式、instanceof()和typeof()的区别

ELNino_Thomas.Liang

已于 2023-09-19 17:59:19 修改

阅读量477

点赞数

文章标签： vue javascript

于 2021-02-03 22:32:49 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_51972964/article/details/113618414

版权

本文介绍SPA单页应用的两种路由模式：hash模式和history模式，并详细讲解如何在Vue CLI项目中配置history模式的路由及使用CDN模式打包项目以减少包体积。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SPA单页应用两种路由模式–hash模式、history模式

hash模式:(默认模式)url中会有#,#后面是路径. 特点是前端访问,#后面的变化不会经过服务器( 不会向服务器发请求
history模式:正常的访问模式,特点是后端访问,任意地址的变化都会访问服务器

配置history模式路由

//router/index.js
const createRouter = () => new Router({
	mode:'history', //不写的话默认为hash模式
	base:'base',//自定义路径基地址,类似于hash的#,可不写
	scrollBehavior: () => ({ y: 0 }),
 	routes
})

vue-cli打包时采用CDN模式排除体积较大的包

//vue.config.js
// 新建排除的包的列表
let externals = {}

// 新建排除掉的包从指定服务器获取
let cdn = {
	js:[],
	css:[]
}

// 新建环境判断:目的-只有在生产环境时才采用CDN
const isProd = process.env.ENV !== 'development'
// .env.development文件中 有ENV = 'development'

// 如果环境为生产环境,则采用CDN模式 (例如要排除掉Vue和element-ui)
if(isProd){
	externals = {
		'vue':'Vue',
		'element-ui':'ELEMENT'
		//名称写法需要参照提供服务器的文件
	},
	cdn = {
		// css
		 css: [
   			 // element-ui css
    		'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // 样式表
   		 ]
   		 
   		// js
   		 js: [
  			 // vue 一定要写在最前面 vuejs
      		'https://unpkg.com/vue/dist/vue.js', 
      		// element-ui js
      		'https://unpkg.com/element-ui/lib/index.js'
  		 ]
	}
}


configureWebpack:{
  name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    //把排除的包的名单添加到configureWebpack
	externals
},

chainWebpack(config) {
// 把提供CDN服务器添加到chainWebpack
 config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })
}

在public/index.html文件中配置上CDN的css和js

<!-- public/index.html 文件中配置上CDN的css和js -->
<html>
	<head>
	<!-- css文件自动引入 -->
	<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
      <link rel="stylesheet" href="<%=css%>">
    <% } %>
	</head>
	<body>
	<!-- built files will be auto injected,打包js文件会自动引入 -->
	 <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
    <% } %>
	</body>
</html>

额外的查漏补缺:

instanceof()和typeof()的区别

因为typeof()来判断数组、对象、null,返回的都会是object,不能分辨出数组或对象,此时需要用到instanceof()

instanceof() :

nstanceof用来判断对象，代码形式为obj1 instanceof
obj2（obj1是否是obj2的实例），obj2必须为对象，否则会报错！其返回值为布尔值。
instanceof可以对不同的对象实例进行判断，判断方法是根据对象的原型链依次向下查询，如果obj2的原型属性存在obj1的原型链上，（obj1
instanceof obj2）值为true。