手把手教你基于vue-cli搭建多页面应用项目

1. 全局安装vue-cli

npm install -g vue-cli

2.基于webpack项目模板创建项目

进入你的工作目录 在命令行输入
vue init webpack yourProjectName

2.1 项目模板初始化选项

按照个人喜好进行配置的选择就好，嫌麻烦可以一路回车，除了vue-router 其他全部No也行（最好不使用eslint 因为要配置一些东西 还可能存在报错bug）

3. vue-cli单页面运行效果

根据黄字提示进入指定目录 然后运行即可

运行效果图：

4. 基于Vue-cli的多页面应用配置

5.这个是创建完项目后的初始目录结构，接下来我们要进行目录结构的改造

5.1 在src目录下创建一个pages目录，按照个人习惯可以在pages目录下面再创建各种类别的文件夹（如index.html放在index文件夹下面），将根目录下的index.html放在pages下面的index文件夹下面，删除src目录下的App.vue文件（删除App.vue是可选项）。 如果不想移动也可以直接删除掉根目录下的index.html文件。

5.2 在index.html所在目录下面创建index.js和index.vue

5.3 在index.vue中写自己想要写的页面

5.4 在index.js里面添加如下内容

import Vue from 'vue'
import index from './index.vue'

// eslint-disable-next-line no-new
new Vue({
  el: '#index',
  render: h => h(index)
})

5.5 修改index.html中的内容

5.6 至此页面的准备部分已经结束，因为要展示多页面的功能 因此我重复上述步骤，又创建了一个页面

6. 多页面配置的修改

主要修改如下这四个配置

6.1 在utils.js里面添加如下内容

// 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
}

6.2 修改webpack.base.conf.js里面的内容

6.3 修改webpack.dev.conf.js里面的内容

6.4 修改webpack.prod.conf.js里面的内容

6.5 到此基于vue-cli的搭建过程就结束了 下面是运行测试图

npm run dev

默认访问index.html

访问test.html

7. build打包过程中可能会存在各种静态资源的丢失或者运行后明明有文件却显示404问题。大多都是路径的问题

用以下的一个项目记录我解决静态资源丢失的方法。（我的静态资源放在了static目录下面而不是assets目录下）

7.1修改 config/index.js文件

7.2 修改build/utils.js文件

此时修改完后 若想要使打包完后的项目图片等运行时正常，把所有显示页面中的src后面的链接都改成 . ./. ./. ./static/xxx/xxx/xxx
例如此处的显示页面index.vue

以及其他页面 如video.html等

8. 对于自己的页面想要添加js和css文件怎么办？（以静态资源文件放在static为例）

可以在index.html或其他指定页面中直接添加js和css
切记！路径一定要这样写！否则会出现打包后静态资源丢失或者找不到的问题
./static/xxx/xxx/xxx

8.1 对于自己写的js文件中引入的静态资源路径怎么写？

以该项目自己写的video.js为例，该js引入了要播放视频的资源地址

emmmmmm…报错可以直接忽视掉= = 也就是eslint不好的地方了
路径的写法也是./static/xxx/xxx
这样可以保证打包后的项目不会找不到或丢失资源

9. 运行结果

9.1 本地测试

可以看到 js、css等都是没有问题的

9.2. 服务器测试build后的打包文件

可以看到 js、css等也是没有任何问题的

10.总结

如果觉得vue-cli搭建多页面应用比较麻烦 可以考虑下nuxt 还是比较方便的。以上方法亲测有效 但是毕竟我们是敲bug的 所以可能出现各种其他问题 欢迎讨论！感谢观看！