Vue单页面和多页面的使用

Vue单页面和多页面的使用

配置多入口文件

Vue单页面 只有一个页面index.html在里面 切换不同的组件

我想配置多页面？有多个页面 写死的步骤 只需要配置 vue.config.js就行

module.exports = {

    //配置 和你的文件夹匹配两套文件
    //相当于写了两套代码。


    //pages配置 多页面入口 index 和ui
    pages:{
        index:{
            //page的入口

            entry:"src/views/index/main.js",
            //模板来源
            template:"public/index.html",
            //在dist/index.html的输出
            filename:"index.html"
            //当使用title选项时，
            //template中的title标签需要是<title><%=
            title:"Index Page"
        },
        ui:{
            //page的入口

            entry:"src/views/index/main.js",
            //模板来源
            template:"public/ui.html",
            //在dist/ui.html的输出
            filename:"ui.html"
            //当使用title选项时，
            //template中的title标签需要是<title><%=
            title:"Index Page"
        }
    
    }

}

 

 

两个html页面跳转，是会重新刷新页面的 使用a标签，现在他是两套文件

morepage

分析 单页面即所有的模块统统置于一个html文件纸上，切换模块，不会重新对html文件和资源进行再次请求，服务器不会对我们换页面的动作 产生任何反应，所以我们感觉不到任何的刷新动作，速度和体验很畅快。

多页面应用 即多个html页面 共同的使用，可以认为一个页面即一个模块，但不排除 多个单页应用混合到一起的组合情况，多页面切换一定会造成 页面资源的重新加载，这也就意味着 如果 多页面之间切换，一定会造成很大数据的重置。

一个项目分成很多小vue项目 也可以直接创建两个项目。