重建基於vue的多入口項目——項目的重建和配置文件的修改部分

1.新建項目

新建vue項目直接通過命令行即可，過程比較簡單，具體參照：https://www.jianshu.com/p/02b12c600c7b

 需要注意的是，直接在需要生成的目錄下用命令行操作即可，不用先新建該項目的文件夾。

2.遇到報錯

Error: Cannot find module 'array-includes'

解決方法參照：https://blog.csdn.net/weixin_44388523/article/details/89916370

報錯原因：項目外層的目錄名發生更改
解決辦法：
1.刪除項目中node_modules文件夾 ，
2.執行 npm cache clean 命令清除掉cache緩存，
3.npm install 重新安裝依賴后，npm run dev 運行項目。

3.配置多個項目入口：

剛開始的操作是參照：https://www.jianshu.com/p/75ae1015341d

該篇博客介紹的方法是直接將多入口的文件名和配置一一對應，寫死在配置文件中。

該做法有兩個缺點：（1）如果項目入口比較多，配置文件內容就很相應增加，顯得很冗長

（2）若項目中要新增入口，則需要修改三個配置文件內容（webpack.base.conf.js、webpack.prod.conf.js、webpack.dev.conf.js）

所以后面的操作改為參照：https://blog.csdn.net/yw00yw/article/details/87935937?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3

這里，我要建的入口文件有三個:admin（管理端）、user（客戶端）、login（登錄端），所以目錄如下：

首先在utils.js文件中：

（這里我將入口文件都放在src/pages目錄下）

/* 這里是添加的部分 ---------------------------- 開始 */

// glob是webpack安裝時依賴的一個第三方模塊，還模塊允許你使用 *等符號, 例如lib/*.js就是獲取lib文件夾下的所有js后綴名的文件
var glob = require('glob')
    // 頁面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
    // 取得相應的頁面路徑，因為之前的配置，所以是src文件夾下的pages文件夾
var PAGE_PATH = path.resolve(__dirname, '../src/pages')
    // 用於做相應的merge處理
var merge = require('webpack-merge')


//多入口配置
// 通過glob模塊讀取pages文件夾下的所有對應文件夾下的js后綴文件，如果該文件存在
// 那么就作為入口處理
exports.entries = function() {
    var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
    var map = {}
    entryFiles.forEach((filePath) => {
        var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        map[filename] = filePath
    })
    return map
}

//多頁面輸出配置
// 與上面的多頁面入口配置相同，讀取pages文件夾下的對應的html后綴文件，然后放入數組中
exports.htmlPlugin = function() {
        let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
        let arr = []
        entryHtml.forEach((filePath) => {
            let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
            let conf = {
                // 模板來源
                template: filePath,
                // 文件名稱
                filename: filename + '.html',
                // 頁面模板需要加對應的js腳本，如果不加這行則每個頁面都會引入所有的js腳本
                chunks: ['manifest', 'vendor', filename],
                inject: true
            }
            if (process.env.NODE_ENV === 'production') {
                conf = merge(conf, {
                    minify: {
                        removeComments: true,
                        collapseWhitespace: true,
                        removeAttributeQuotes: true
                    },
                    chunksSortMode: 'dependency'
                })
            }
            arr.push(new HtmlWebpackPlugin(conf))
        })
        return arr
    }
    /* 這里是添加的部分 ---------------------------- 結束 */

在webpack.base.conf.js文件中：

   /* 修改部分 ---------------- 開始 */
   entry: utils.entries(),
   /* 修改部分 ---------------- 結束 */

在webpack.dev.conf.js文件中：（注釋部分均未第一種一一對應式配置的方法，冗長且不靈活）

 plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
     /* 添加 .concat(utils.htmlPlugin()) ------------------ */
  ].concat(utils.htmlPlugin())

　　在webpack.prod.conf.js文件中

同上一個文件，在plugins后面加上：

.concat(utils.htmlPlugin())

這里，可以看出，在utils.js文件中的操作就是將page目錄下全部的入口文件找到，而不是自己在三個webpack的配置文件中一一對應地去配置，后期要新增入口就更加靈活了。

 

配置介紹后：運行 cnpm run dev,項目可以正常運行，我這里有三個入口文件：admin、user、login，分別的訪問路徑： http://localhost:8080/admin.html#/、 http://localhost:8080/user.html#/、 http://localhost:8080/login.html#/

 

//todo

//項目構建到現在，目前出現的問題是路由部分的配置和訪問。我講環保院項目的頁碼代碼文件移動到該新建的項目下，雖然頁面都能成功渲染，但是多個頁面直接的跳轉、不同系統直接的訪問和頁面刷新后找不到路徑（？這個問題很奇怪，就是路徑跳轉之后能成功訪問到頁面，但在該頁面上刷新后會報錯找不到頁面？）