vue-cli 2.x 配置多页面

最新推荐文章于 2024-05-15 13:23:20 发布

邱先生~

最新推荐文章于 2024-05-15 13:23:20 发布

阅读量2.7k

点赞数 2

分类专栏： vue 文章标签： vue-cli多页面配置

本文链接：https://blog.csdn.net/weixin_43932245/article/details/98777598

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1.适用于Vue-cli 2.x

适用于Vue-cli 2.x

创建相应的html静态文件。
创建匹配html的.vue文件和对应的.js文件
修改config/index.js
修改build/webpack.base.conf.js
修改build/webpack.dev.conf.js
修改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.vue 和 main.js 移动到 pages/index文件夹里。

相应的login.js和myLogin.vue 也是复制App.vue 和 main.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 版本的多页面配置就先介绍的这里啦~~~

邱先生~

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vue-cli 2.x 配置多页面

1.适用于Vue-cli 2.x适用于Vue-cli 2.x创建相应的html静态文件。创建匹配html的.vue文件和对应的.js文件修改config/index.js修改build/webpack.base.conf.js修改build/webpack.dev.conf.js修改build/webpack.prod.conf.js下面以创建login.html为所需要...
复制链接

扫一扫