第一次做一個從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 中判斷有沒有登陸過

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

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