首先在pages目录下新建两个页面，目录结果如下
index.html代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>index test</title>
</head>
<body>
<div id=”index”></div>
<!– built files will be auto injected –>
</body>
</html>这个是我们要单独生成的页面,最后也是生成
index.html
index.vue代码：（项目创建后，修改App.vue）
<style scoped>
.boys {
background-color: red;
}
</style><template>
<div id=”app”>
<img src=”../../assets/logo.png”>
<!– router-link 定义点击后导航到哪个路径下 –>
<router-link to=”/welcome/home”>Home页面</router-link>
<router-link to=”/welcome/about”>About页面</router-link>
<router-link to=”/welcome/hello”>hello页面</router-link>
<!– 对应的组件内容渲染到router-view中 –>
<router-view></router-view>
</div>
</template><script>
export default {
name: ‘boys’
}</script>
<style>
#app {
font-family: ‘Avenir’, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
这是我们的vue文件，可以看成一个组件，其实.vue文件你可以看成一个语法糖，最终会被vue-loader编译成js,生成对应的css,js,dom
index.js 文件
import Vue from ‘vue’import Index from ‘./index.vue’import router from ‘../../router’Vue.config.productionTip = falsenew Vue({el: ‘#index’,router,components: { Index },template: ‘<Index/>’})
修改webpack.config.js
修改webpack.base.conf.js文件
module.exports = {
………………
entry: {
app: ‘./src/main.js’,
enter: ‘./src/pages/index/index.js’, //配置页面入口方式一
‘pages/test/test’: ‘./src/pages/test/test.js’, //配置页面入口方式二
},
………………
}
- 修改webpack.dev.conf.js文件
我们使用html-webpack-plugin来生成我们的对于的页面。
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new HtmlWebpackPlugin({
filename:'./enter.html',
template:'./src/pages/index/index.html',
inject: true,
chunks:['enter']
}),
new HtmlWebpackPlugin({
filename:'./pages/test/test.html',
template:'./src/pages/test/test.html',
inject: true,
chunks:['pages/test/test']
}),
