vue-cli3配置多页面应用

6,951 阅读2分钟

安装

可以使用下列命令安装这个cli3新的包:

npm install -g @vue/cli

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确 (3.x):

vue --version

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

创建一个项目

运行以下命令来创建一个新项目:

vue create vue-cli-pages

详情请阅读官方文档 cli.vuejs.org/zh/guide/cr…

默认的文件目录

现在让我们来修改文件目录

1.添加vue.config.js

module.exports = {
  publicPath: './',
  // 输出文件目录
  outputDir: 'front',
  // 多页配置
  pages: {
    admin: {
      // 应用入口配置,相当于单页面应用的main.js,必需项
      entry: 'src/pages/admin/main.js',
      // 应用的模版,相当于单页面应用的public/index.html,可选项,省略时默认与模块名一致
      template: 'public/admin.html',
      // 编译后在dist目录的输出文件名,可选项,省略时默认与模块名一致
      filename: 'admin.html'
    },
    index: {
      entry: 'src/pages/index/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  // webpack-dev-server 相关配置
  devServer: {
    // 本地端口
    port: 9090,
    // 代理
    proxy: '',
    // eslint-loader警告配置
    overlay: {
      warnings: true,
      errors: true
    }
  },
  // webpack相关配置
  configureWebpack: {
    devtool: 'source-map'
  }

}

更多详细配置请查看官网 cli.vuejs.org/zh/config/#…

2. 添加第二个页面admin.html

在public目录下新建admin.html,用来后台页面的模板

3.修改src目录下的文件结构

此目录结构assets用来存放资源,component用来存放组件,view用来写不同的路由页面,app.vue是主入口页,main.js是主入口配置,router.js是路由配置,store.js是vuex配置

分析可以发现assets,component文件加可以做公共不部分,views; App.vue; main.js; router.js; store.js是一个单页。

所以我们可以仿照这个结构再建一页,形成多页

1.建立pages文件下,在下面建立index文件夹表示前台页,然后将views; App.vue; main.js; router.js; store.js移动到这个文件夹内

2.类似建立admin文件夹,修改内容

3.结合vue.config.js里的多页配置

4.已下是注意点

1.修改$mount,与public下的id对应(admin类似)

2.修改路由配置,将history模式去掉(admin类似)

3.这时重新运行你会发现还有报错,因为我们修改了文件路径,所以有些地方文件引用报错,(admin类似)

运行查看

最后如果你觉得麻烦,不想配,可以拉取我的git,里面是多页面模板 github.com/Wu-Qin-Hao/…