vue如何設置login頁面

第一次做一個從0開始的vue項目

之前都是接手的別人寫好了框架的項目 或者是別人做了一半的項目

所以對有些東西還是一知半解

從零開始的就比較棘手一些了

從整體的框架到路由的配置（項目的路由有一些和其他的不太一樣）

閑話不多說了直接開始正題

項目是vue2.0

這個項目做到差不多的時候

突然發現了一個比較致命的問題

那就是登陸頁面的問題

之前都是寫的.vue的文件

現在不行了 需要有一個單獨的登陸頁面 比如 login.html

讓項目一運行就進入login.html

大家都知道 vue是單頁面 運行會直接進入 index.html

所以需要增加一個入口來替代index.html

只有登陸了才可以進入index.html

那就需要去配置一下了

所以這里就需要去看一下我們的配置文件

這三個文件都是很重要的

因為本人也是小白一枚 所以還在研究當中

目前只能夠把配置的地方給大家說一下

至於原理，大家可以自行百度一下或者問一下其他的大牛

首先 我們需要新建一個login.html   是和index.html 同級的 里面呢就是登錄頁

在static中建一個js文件夾  里面放login.js 當然 嫌麻煩也可以直接在頁面中寫方法

接下來 增加紅色部分

代碼：

new HtmlWebpackPlugin({
  filename: 'login.html',
  template: 'login.html',
  inject: true,
  chunks: ['login']
}),

接下來 修改紅色部分

代碼：

new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
    ? 'login.html'
    : config.build.login,
  template: 'login.html',
  chunks: ['vendor','manifest','login'],
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
}),
然后 打開

修改index.js

代碼：

login: path.resolve(__dirname, '../dist/login.html'),

最后我是用了比較笨的方法來實現一進來就進入登錄頁
那就是在app.vue 中判斷有沒有登陸過

也可以嘗試在路由中配置
因為能力有限，所以只能先這樣了

如有錯誤還望多多指正，感激不盡