vue多页面程序配置

本文最后更新于：2021年2月25日 凌晨

最近做个vue的项目，突然想把项目中的登录页面隔离出来，配置成多页面程序，所以就搞了一下，步骤如下：

修改vue.config.js文件

因为我是用vue-cli4.x配的vue项目，所以默认是没有这个文件的。不过无伤大雅，我们直接在根目录新建一个就可以。
新建vue.config.js

// vue.config.js

module.exports = {
  pages: {
      index: {
        // page 的入口
        entry: 'src/main.js',
        // public里面创建的入口文件名
        template: 'public/index.html',
        // 编译后在 dist文件夹中的输出文件名，可选项，省略时默认与template名一致
        filename: 'index.html',
        // 当使用 title 选项时，
        // template 中的 title 标签需要改成这样
		// <title><%= htmlWebpackPlugin.options.title %></title>
        title: '这是index标签',
        // 在这个页面中包含的块，默认情况下会包含
        // 提取出来的 common chunks 和 vendor chunk。
        chunks: ['chunk-vendors', 'chunk-common', 'index']
      },
      // 当使用只有入口的字符串格式时，也就是只有entry属性时，直接用字符串表示模块入口
      login: {
        entry: 'src/login/login.js',
        template: 'public/login.html',
        filename: 'login.html',
        title: 'login标题'
      }
    }
}

新建模板

打开项目中的public文件夹，新建html文件，文件名字与vue.config.js中，login页面的template选项相同
新建login.html
按照index.html修改代码

// login.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="login"></div> // 这里的id可以修改，后面会用到
  </body>
</html>

新建入口文件

配置入口文件时，入口文件的文件路径需要和vue.config.js的路径一致
新建login.js

// login.js

import Vue from 'vue'
import login from './login.vue' //导入vue文件

Vue.config.productionTip = false
new Vue({
	render: h => h(login),
}).$mount('#login') // 这里的#login就是刚刚login.html的id

完成

不过再使用的时候，有一些需要注意，虽然可以通过location.href(‘login’)直接访问这个页面，但是我强烈不建议这么做，因为你原来的页面如果有使用vue-router的children的话，href的更改会接着children的父路径，所以，我建议使用完整路径

location.href(`http://${location.host}/login`) // 不要忘记'http://'，否则报错
// 或者
location.assign(`http://${location.host}/login`)
// 可以通过 '参数名?=' 传递数据
location.assign(`http://${location.host}/login?type=${e}`)
前端
Javascript Vue

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！