vue修改入口文件名字_重建基于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

})returnmap

}//多页面输出配置//与上面的多页面入口配置相同，读取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(newHtmlWebpackPlugin(conf))

})returnarr

}/*这里是添加的部分 ---------------------------- 结束*/

在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的配置文件中一一对应地去配置，后期要新增入口就更加灵活了。

//todo

//项目构建到现在，目前出现的问题是路由部分的配置和访问。我讲环保院项目的页码代码文件移动到该新建的项目下，虽然页面都能成功渲染，但是多个页面直接的跳转、不同系统直接的访问和页面刷新后找不到路径(？这个问题很奇怪，就是路径跳转之后能成功访问到页面，但在该页面上刷新后会报错找不到页面？)