构建多页面Vue应用心得
2019-04-25 本文已影响0人
念念碎平安夜
一、删除原有的public目录下的index.html页面，删除原有src目录下的App.vue和main.js文件。
二、src目录下新建目录views，用来存放多个页面，右击views新建index、article和person三个目录，以index为例，新建三个文件index.html、index.js和index.vue
//index.html
<!DOCTYPE html>
<html lang="en">
<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>index</title>
</head>
<body>
<noscript>
<strong>We're sorry but mpa 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>
//index.js
import Vue from 'vue'
import index from './index.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(index),
}).$mount('#app')
<template>
<div id="app">我是index页面</div>
</template>
<script>
export
default {
name: 'index',
data() {
return {}
},
}
</script>
<style>
</style>
其余两个页面内容相似，都有自己相应的html,js,vue
三、进入配置，Vue CLI3新建的项目并没有vue.config.js这个文件,于是自己在根目录创建一个这个文件
//关于多页面的配置，主要是路径要配置正确，能够映射到对应的文件
// 多页面软件
module.exports = {
lintOnSave: false,
pages: {
person: {
entry: "./src/views/person/person.js", //配置入口js文件
template: "./src/views/person/person.html", //主页面
filename: "person.html", //打包后的html文件的名称
title: '测试'
},
index: {
entry: "./src/views/index/index.js", //配置入口js文件
template: "./src/views/index/index.html", //主页面
filename: "index.html", //打包后的html文件的名称
title: '测试'
},
article: {
entry: "./src/views/article/article.js", //配置入口js文件
template: "./src/views/article/article.html", //主页面
filename: "article.html", //打包后的html文件的名称
title: '测试'
},
},
devServer: {
index: 'index.html' //运行项目时候加载的第一入口
}
}
