vue-cli4.x+vue-router4.x+element-plus问题及配置记录

一、vue-router相关

 这样配置，避免打包之后，刷新页面报404错误

const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL),
  history:createWebHashHistory(),
  routes,
});

 要用import引入，不能用require，避免打包之后加载不在组件的问题

{
	path: "/user",
	name: "user",
	title: "用户列表",
	menuid: "100901",
	parentid: "1009",
	needAuth: true,
	component: () => import("@/views/user/user.vue")
},

二、静态资源相关

 图片引入方式，分三种：

1、在template里面

<img ref="g3" src="@/assets/logo.png" style="width: 297px;height: 52px;" />

2、在script里面

bgPictures: [
	{ id: '0',src: require('@/assets/login/1.png')},
	{ id: '1',src: require('@/assets/login/2.png')},
	{ id: '2',src: require('@/assets/login/3.png')},
	{ id: '3',src: require('@/assets/login/4.png')},
	{ id: '4',src: require('@/assets/login/5.png')},
	{ id: '5',src: require('@/assets/login/6.png')},
	{ id: '6',src: require('@/assets/login/7.png')},
	{ id: '7',src: require('@/assets/login/8.png')},
	{ id: '8',src: require('@/assets/login/9.png')},
	{ id: '9',src: require('@/assets/login/10.jpg')},
	{ id: '10',src: require('@/assets/login/11.jpg')},
	{ id: '11',src: require('@/assets/login/12.jpg')},
	{ id: '12',src: require('@/assets/login/13.png')},
	{ id: '13',src: require('@/assets/login/18.jpg')},
	{ id: '14',src: require('@/assets/login/23.jpg')}
],

3、在style里面

#left_bar{
	background-image: url('~@/assets/index/left.png');
	height: 100%;
	margin: 0 auto;
	width: 100%;
	background-repeat:no-repeat;
	background-position:center;
	background-size: cover;
	padding: 30px 0 90px;
	min-height: 835px;
}

三、打包配置

 1、vue.config.js

publicPath: "./",

避免打包之后页面空白问题