1.适用于Vue-cli 2.x

适用于Vue-cli 2.x
  1. 创建相应的html静态文件。
  2. 创建匹配html.vue文件和对应的.js文件
  3. 修改config/index.js
  4. 修改build/webpack.base.conf.js
  5. 修改build/webpack.dev.conf.js
  6. 修改build/webpack.prod.conf.js

下面以创建login.html为所需要配置的多页面。

1.在根目录创建login.html页面

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>project1</title>
  </head>
  <body>
    <div id="login"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

页面内容与index.html一致,只需要将对应的id改变下。


2. src下创建pages页面存放需要的多页用到的.vue.js文件

创建pages页面是方便以后多页面的管理,页面少的话可以直接放到根目录下。

在这里插入图片描述
将页面原有的App.vuemain.js 移动到 pages/index文件夹里。

相应的login.jsmyLogin.vue 也是复制App.vuemain.js 就行,然后改一些基础的配置。

(这里说一下,组件名称是myLogin.vue而没有用login.vue,是因为我测试的时候login.vue,一直warn,感觉是占用的这个命名,换了一个名称就好啦)

login.js文件
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Login from './myLogin'
// import router from './router'

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#login',
  // router,
  components: { Login },
  template: '<Login/>'
})

myLogin.vue文件


<template>
  <div id="login">
    <input type="button" value="跳转到首页" @click='go()'>
    <!-- <router-view/> -->
  </div>
</template>

<script>
export default {
  name: 'Login',
  methods:{
    go(){
      window.location.href="./index.html"
    }
  }
}
</script>

<style>
#login {
}
</style>


3. 修改config/index.js`

build中添加login.html的路径,即编译后生成的login.html

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    login: path.resolve(__dirname, '../dist/login.html'),

4.修改build/webpack.base.conf.js

entry中添加入口js文件地址

 entry: {
 	// app: './src/main.js',
    app: './src/pages/index/main.js',
    login: './src/pages/login/login.js'
  },

因为之前已经将相应文件放到了pages文件夹里。


5.修改build/webpack.dev.conf.js

plugins中修改成以下代码

	new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks:['app']
    }),

 	上面是原先的
 	下面是新增的
 
    new HtmlWebpackPlugin({
      filename: 'login.html',
      template: 'login.html',
      inject: true,
      chunks:['login'] 不加这一段的话,会将打包之后的pages.js自动引入到index.html中
    }),

并在HtmlWebpackPlugin做增加chunks:[‘app’]


6.修改build/webpack.prod.conf.js

plugins中修改成下代码

  new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency',
      chunks: ['manifest','vendor','app'] 加入指定引入文件
    }),

	上面是原先的
 	下面是新增的

    new HtmlWebpackPlugin({
      filename: config.build.login,
      template: 'login.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency',
      chunks: ['manifest','vendor','login'] 加入指定引入文件
    }),

同样的,在之前的HtmlWebpackPlugin中的chunks中加入指定文件引入。


配置完以上内容,打包之后就会像下面的图片一样
index.html

在这里插入图片描述

login.html

在这里插入图片描述
vue-cli 2.x 版本的多页面配置就先介绍的这里啦~~~

Logo

前往低代码交流专区

更多推荐