关于vue项目多页面的配置

左手的ㄟ右手 2022-04-10 11:19 312阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

**诶，说实话，官方的配置改的也蛮快的，有同学遇到了webpackJsonp is not defined 的问题**  
那么打包配置需要注释掉一点点东西

CommonsChunkPlugin的相关注释掉就是下面的这个蛀虫
    
    new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          minChunks: function (module, count) {
            // any required modules inside node_modules are extracted to vendor
            return (
              module.resource &&
              /\.js$/.test(module.resource) &&
              module.resource.indexOf(
                path.join(__dirname, '../node_modules')
              ) === 0
            )
          }
        }),
        // extract webpack runtime and module manifest to its own file in order to
        // prevent vendor hash from being updated whenever app bundle is updated
        new webpack.optimize.CommonsChunkPlugin({
          name: 'manifest',
          chunks: ['vendor']
        }),

**由于很多人加QQ问我关于这篇文章的配置问题，感觉给出个 Demo 比较合适，Demo如下：**  
[https://github.com/zhuss/vue-pages][https_github.com_zhuss_vue-pages]  
由于文章写的时间比较久了，可能和Demo代码有部分出入，不过亲测demo有效。  
\--------分割线-----

基于vue2.0生成项目，一段时间都在找如何配置成多个页面的。网上有这样的例子相对也是比较详细的，但是还是有些许不一样的地方的。所以，我还是记录下来，当然我也是参考了网上的资料的。

当然先来个vue的项目，打开命令行工具，对边进入一个目录下。

vue init webpack my-project

注意，node和npm的版本，npm版本最好是3.0+的。其中my-project是自定义的项目名，按照步骤一步一步来就好了，然后进入自动生成的文件夹下，下载依赖的包，然后运行，应该会打开浏览器的localhost:8080。

npm install  
    npm run dev

如果不出意外是能够打开页面的。

然后你就可以在项目的基础上开心的写组件了，那么我们应该怎么修改vue的配置，让我们的项目是多个页面的呢。

第一步  
在index.html同级目录下新增一个页面，welcome.html，然后在src目录下，添加Welcome.vue和welcom\_main.js。

第二步修改配置，配置项有4个文件：

build//文件夹下
    webpack.base.conf.js
    webpack.dev.conf.js
    webpack.pro.conf.js
    config文件夹下
    index.js

其中所有的配置，有index的地方，都需要在复制一份。  
比如index.js中:

build:{
      play:path.resolve(__dirname, '../dist/welcome.html'), //新增的配置
    }

webpack.base.conf.js中

entry:{
      welcome: './src/welcome_main.js', //新增的配置
    }

其他配置文件里的改动都类似。复制粘贴，然后改吧改吧就好了。  
配置完后，运行下 npm run dev

不过这种方式的多页面配置，每次新加一个页面，必须重新配置一次，比较麻烦，如果页面不多，倒也是可行的，但是如果随着项目越来越多，到时候项目目录就很不简洁了。

所以，还有一种一劳永逸的方式。原理其实一样的，不过是文件的配置让文件自动生成。

项目生成方式还是一样，接下来的配置有点不同。

第一步：安装一个包glob 很重要的包

npm install  glob --save-dev

第二步配置config下面的index.js文件

这样就配置完了index.js了。

然后是配置webpack.base.conf.js

这个文件主要是配置entry: entries入口js。具体就不多说了，剩下的两个配置文件类似。我直接复制代码了。

webpack.dev.conf.js文件的配置

webpack.prod.conf.js文件的配置

好了，所有配置文件写完。  
还有最后一步就是修改项目目录结构。  
在src目录下新建一个page目录，然后建一个index目录用来放index.html、Index.vue、index\_main.js三个文件。  
如果有多个页面，就类似添加一个video目录存放三个文件，每个文件的书写方式。按照index文件书写方式一样。

index.html文件

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <link rel="shortcut icon" href="http://cdn.bunny-tech.com/promotion/static/act-imags/icon.png" />
      <title>映兔视频</title>
    </head>
    
    <body>
      <div id="app"></div>
    </body>
    
    </html>

Index.vue文件

<template>
      <div class="warp">
        <p>index</p>
        <hello></hello>
      </div>
    </template>
    <script>
    import main from '../../lib/main'
    import Hello from '../../components/Hello'
    import store from '../../lib/store'
    
    export default {
      name: 'index',
      components: {
        'hello': Hello
      },
      data() {
        return {
          bannerHref: '',
    
        }
      },
      mounted() {
        this.loadData();
      },
      methods: {
        loadData() {
          var rep = {
            bannerPosition: 'hasActive'
          }
          store.getinfo(rep,
            function(res) {
              if (res.errorCode == 0) {
                console.log(res.data);
              }
            })
        }
      }
    }
    </script>
    <style scoped>
    .warp {
      max-width: 750px;
      margin: 0 auto;
      background: #CCC;
    }
    </style>

index\_main.js文件

import Vue from 'vue'
    import App from './Index'
    import Resource from 'vue-resource'
    
    Vue.use(Resource);
    
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App }
    })

ok了，记得删除主目录下的index.html文件哦，因为那个已经被我们移到page目录下面了。以后就安心写业务代码吧。不需要管配置的问题了。上面文件里关于vue-resource的代码，在写demo的时候都可以去掉，那是关于vue异步请求数据的，这个例子用不到。如果喜欢下次写一点关于vue异步请求数注意事项。

作者：四哥0819  
链接：https://www.jianshu.com/p/acbff04b4096

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、[金山软件][Link 1]、[百姓网][Link 2]等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[https_github.com_zhuss_vue-pages]: https://link.jianshu.com?t=https://github.com/zhuss/vue-pages
[Link 1]: https://www.baidu.com/s?wd=%E9%87%91%E5%B1%B1%E8%BD%AF%E4%BB%B6&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[Link 2]: https://www.baidu.com/s?wd=%E7%99%BE%E5%A7%93%E7%BD%91&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[2018121912254161]: /images/20220331/59e0a4f2d79a4f98a60eeb341094ff26.png