使用vue-cli搭建多页应用

一时失言乱红尘 2021-11-14 12:00 496阅读 0赞

# 使用vue-cli 3.9搭建多页应用 #

#  #

在vue-cli 3.0之后，官方已经支持通过简单的配置来创建多页应用了，单默认创建的应用还是单页应用，接下来就介绍下我创建多页应用的流程；

# 第一步，创建项目 #

[官方vue-cli创建项目的教程][vue-cli]

*  选择一个合适的目录，打开命令行窗口，运行 `vue ui`

> 这里假设你已经安装了 node.js以及vue-cli环境了，若没有安装的话可以先百度一下

![创建项目][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pfZG1zZA_size_16_color_FFFFFF_t_70]  
弹出网页界面之后，默认是在项目这个标签下的，显示的是当前目录下所有的vue项目，点击创建进入项目创建界面

*  这里面的second目录就是我新创建的页面的代码文件了

# 第二步，配置vue.config.js #

[vue.config.js配置参考官方文档][vue.config.js]

> 以下的多页配置参考的是 [官方的配置文档的 pages部分][pages]

*  vue-cli默认是没有创建`vue.config.js`的，我们在 `package.json`同级目录，也就是项目的根目录下创建 vue.config.js文件

const pages ='./src/pages';
    module.exports = {
        pages: {
              index: {    //这是默认页
                      // page对应的js的入口        
                      entry: pages+'/index/main.js',
                       // 模板来源，也就是当前页使用哪个html文档作为模版，默认使用 public/index.html        
                       template: pages+'/index/index.html',        
                       // 在 dist/index.html 的输出, 使用npm run build编译输出的路径（相对于 /dist而言）
                       // 若想生成目录，只需要改为 ‘dirname/index.html即可’
                        filename: 'index.html',
               },
               secondpage:      //新创建的第二页，在开发环境下，这里的‘secondpage’就是路由链接
                {        
                		entry: pages+'/second/second.js',       
                		 template: pages+'/second/second.html',        
                		 filename: 'second/second',      
                }
    }

*  以上就是多页应用配置的基本过程了

[vue-cli]: https://cli.vuejs.org/zh/guide/creating-a-project.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pfZG1zZA_size_16_color_FFFFFF_t_70]: /images/20211114/8eb5ab9142524f04b2bb22ae808025af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pfZG1zZA_size_16_color_FFFFFF_t_70 1]: /images/20211114/9710f51598c64c31bb9e8e562381dee6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pfZG1zZA_size_16_color_FFFFFF_t_70 2]: /images/20211114/7aa841b2b86d46cc8596387be30e7d0d.png
[vue.config.js]: https://cli.vuejs.org/zh/config/
[pages]: https://cli.vuejs.org/zh/config/#pages