当前位置：首页 > news >正文

vue实现多页面的一些问题解决

news 来源：原创 2024/5/8 8:05:13

最近有做一个项目，然后需要实现多页面的，一个员工界面一个用户界面，因为配置的时候遇到了挺多问题，所以记录加深自己的印象
首先，配置多页面肯定需要vue.config.js，这个文件放在根目录

然后vue.config.js的配置如下：

module.exports = {
	publicPath: './',
	outputDir: 'dist',
	assetsDir: 'static',
	productionSourceMap: false,
	runtimeCompiler: true,//运行时是否启动模板编译
	pages: {
		index: {
			// page 的入口
			entry: "src/main.js",
			// 模板来源
			template: "public/index.html",
			// 在 dist/index.html 的输出
			filename: "index.html",
		},
		user: {
			entry: "src/views/User/User.js",
			template: "public/user.html",
			filename: "user.html"
		}
	},
	devServer: {
		proxy: {
			//反向代理的api地址
			'/api': {
				target: 'http://localhost:8181',
				//secure: true, //http带s开启
				changeOrigin: true,//允许跨域
				pathRewrite: {
					'^/api': '/'
				}
			},
		}
	},
}

这么一看还挺抽象的，再慢慢看下去，首先pages里面就是配置多页面的，index和user，我这里的话index就是员工界面，user是用户界面
然后看一下我的文件结构应该会清楚很多：

然后那个index里的entry就是文件入口，这个一般是你的main.js的路径，因为员工界面的引入内容我放在根目录的main.js里面，但是我的用户那个是放在一个单独文件夹里面配置引入的，所以他就用他自己的main.js就好了，我那里取名是User.js,所以文件名字一定要对应，然后是template的书写，这个肯定是放在public下的文件，要几个页面，就写几个html文件，然后对应的到就行了，filename这个就是你打包后的文件放在dist里面的文件名，就是这么简单就可以了

再看User的文件夹，他相当于是一个单独的小项目，所以他也得有main.js和App.vue，但是和外面的重名又不太好，所以就用这个的界面名称来命名问题也不大，这里的User.js和User.vue有一个特别需要注意的东西
User.vue

<template>
  <div id="user">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<style>
</style>

User.js

import Vue from 'vue'
import User from './User.vue'
import router from './router'
import { Notify, Toast } from 'vant';

import 'vant/lib/index.css';
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use( Notify,Toast);

Vue.use(VueAxios, axios);
Vue.config.productionTip = false
axios.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    Toast({
      type: 'warning',
      message: '网络异常，请稍后重试'
    })
    return Promise.reject(error.response);
  }
)
new Vue({
  router,
  render: h => h(User),
}).$mount('#user')

User.js的$mount(''#user")的#user一定要与User.vue的id名称一样，然后render：h=>h(User)里的User一定要与引入的名称相同,就是import User from './User.vue'这个我刚写的时候找了好久的一个问题,真的是粗心害死人

然后这里面还有一个大坑
就是当运行的时候，会发现这样只能够访问到员工端，但是用户端不管输入什么都进不去，直到我将publicpath:'./'改成publicpath:'/'，就只是把/前面的点去掉之后就可以正常的访问用户界面了，这个我一直没有找到具体的原因，希望有明白的大佬告诉一下我愿意，感激不尽