vue-cli@3.x构建多页面(MPA)应用的配置详解

一、第一步: 安装vue-cli@3.x

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli

@3.x安装命令 : npm install -g @vue/cli

@2.x安装命令 : npm install -g vue-cli

@2.x卸载命令 : npm uninstall vue-cli -g

二、第二步: 创建一个新的项目

vue create projectName

// 在安装过程中，仅仅默认安装了babel

初始目录结构.png

三、第三步: 对初始目录结构进行调整

1. 在src下新建index文件夹
2. 把 '/src/main.js' 移动到 index 文件夹下
3. 把 '/src/App.vue' 移动到 index 文件夹下
4. 删除 '/components'文件夹下的组件

5. 打开 '/src/index/App.vue', 调整代码，使得能够正常执行

   
   调整后的目录结构.png

四、第四步: 在package.json文件所在目录中，创建 vue.config.js 文件，写入如下配置代码

module.exports = {
    pages: {
        index: {

            // 页面的入口
            entry: './src/index/main.js',

            // 页面的模板
            template: './public/index.html',

            // build时输出的文件名
            filename: 'index.html',

            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: '网站首页',

            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        }
    }
}

五、第五步: 运行测试结果

npm run serve

效果图.png

六、 创建其它的页面

做完以上五个步骤后，就已经构建好第一个页面了(index.html)，接下来创建其它页面的步骤，基本和上面相似了，下面以创建 detail.html 页面为例:

第一步: 在 '/src' 下新建 detail 文件夹, 内部结构和 '/src/index/' 文件夹下的结构相同

第二步: 在 '/public/' 下新建 detail.html, 内容和 '/public/index.html' 的相同即可

第三步: 在 '/vue.config.js' 文件夹中进行配置

module.exports = {
    pages: {
        index: {

            // 页面的入口
            entry: './src/index/main.js',

            // 页面的模板
            template: './public/index.html',

            // build时输出的文件名
            filename: 'index.html',

            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: '网站首页',

            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },

        // 对detail页面的配置
        detail: {
            entry: './src/detail/main.js',
            template: './public/detail.html',
            filename: 'detail.html',
            title: '网站的商品详情页',
            chunks: ['chunk-vendors', 'chunk-common', 'detail']
        }
    }
}

第四步: 完成后，重启服务，运行测试即可

detail页面配置好后的首页.png

点击链接，即可跳转到 detail.html 页面，

<a href="detail.html">跳转到商品详情页</a>

七、关于单个页面内路由和组件的配置(以detail页面为例)
就像开发单页面应用那样开发页面内容即可
在 '/src/detail/' 下创建 views 来存放组件
在'/src/detail/'下创建 router.js 文件来配置路由

总结:

一个页面一套SPA，入口文件、路由、资源的路径都要根据实际情况进行设置。