美文网首页
vue-cli 3.0 实现多页

vue-cli 3.0 实现多页

作者: Axe小莱 | 来源:发表于2019-07-27 18:32 被阅读0次
    • vue-cli 3.0 实现多页其实十分简单,主要是要在vue.config.js中配置就可以了
    • 具体步骤:
    1. 在src中创建一个pages文件夹,名字可以自己起,主要是放每个单页项目,每个单页项目再建一个文件夹,里面有index.vue、main.js和index.html(其实这个可以不要,直接用public里面的index.html,就是每次加载页面都挂载在public那个index.html中),具体文件结构如下
    --src
     --pages
      --app
       --index.html
       --index.vue
       --main.js
      --home
       --index.html
       --index.vue
       --main.js
    
    1. 配置vue.config.js,这个是在根目录建的一个配置文件,多页配置如下:
    module.exports = {
      pages: {
        home: {
          entry: './src/pages/home/main.js',
          template: './src/pages/home/index.html',
          filename: 'home.html',
          title: '家',
        },
        app: {
          entry: './src/pages/app/main.js',
          template: './src/pages/app/index.html',
          filename: 'app.html',
          title: '应用',
        },
      },
    };
    
    1. 重新跑npm run serve, 然后就可以在localhost:8080/home或者localhost:8080/app中看到了

    相关文章

      网友评论

          本文标题:vue-cli 3.0 实现多页

          本文链接:https://www.haomeiwen.com/subject/jhoerctx.html