vue-cli 3.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中看到了
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容