vue 如何实现多页面应用

article/2025/9/10 19:53:30

众所都知vue是一个单页面应用，但是单页面应用最大的问题，就是首次加载的时候过慢，因为他要把所有的css，js都要下载下来后，才可以加载页面，尤其是移动端，在弱网的情况下，体验感极差

尝试过很多种优化的方式，就算在优化css,js的体积，但是还是在100-200K的这么个容量，所以我想起能否用多页面应用去解决这个问题。

首先你的会一些webpack

第一步:

进入\build\webpack.base.conf.js目录下，在module.exports的域里，找到entry，在那里配置添加多个入口：

// 文件路径更具自己的实际情况进行配置,我这仅是 demo
entry: {app: './src/main.js',one: './src/js/one.js',two: './src/js/two.js'},

在这里插入图片描述
这里的 one two 一定时要先在这里定义好的,后面是要用到的,好比里面的app 不是随便瞎写的

第二步:

对开发环境run dev里进行修改，打开\build\webpack.dev.conf.js文件，在module.exports那里找到plugins，下面写法如下：

new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true,chunks: ['app']}), new HtmlWebpackPlugin({filename: 'one.html',template: 'one.html',inject: true,chunks: ['one']}),new HtmlWebpackPlugin({filename: 'two.html',template: 'two.html',inject: true,chunks: ['two']}),

在这里插入图片描述
这里的配置比较重要 ,如果没写好的在打包的时候就会报错了, 在chunks那里的app指的是webpack.base.conf.js的 entry 那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry，如果没写则引入所有页面的资源。也就是没有改项目配置前形成的单页应用

第三步:

对run build也就是编译环境进行配置。首先打开\config\index.js文件，在build里加入这个：

index: path.resolve(__dirname, '../dist/index.html'),
one: path.resolve(__dirname, '../dist/one.html'),
two: path.resolve(__dirname, '../dist/two.html'),

在这里插入图片描述
这里也就是打包之后dist文件夹中形成的 html

第四步:

打开/build/webpack.prod.conf.js文件，在 plugins 那里找到 HTMLWebpackPlugin，然后添加如下代码：
其实复制粘贴改吧改吧就能用

new HtmlWebpackPlugin({filename: config.build.index,template: 'index.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true},chunksSortMode: 'dependency',//(在这里和你上面chunks里面的名称对应)chunks: ['manifest', 'vendor', 'app']}),new HtmlWebpackPlugin({filename: config.build.one,template: 'one.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true},chunksSortMode: 'dependency',chunks: ['manifest', 'vendor', 'one']}),

在这里插入图片描述
其中filename引用的是\config\index.js里的build，每个页面都要配置一个chunks，不然会加载所有页面的资源。

上面的操作完成之后进行下面的傻瓜式操作对咱们创建的文件进行码代码
one.js文件可以这样写：

import Vue from 'vue'
import one from './one.vue'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#one',render: h => h(one)
})

在这里插入图片描述
one.vue写法如下：

<template><div id="one">{{msg}}</div>
</template><script>
export default {name: 'one',data () {return {msg: 'I am one'}}
}
</script>

tow 文件中的代码一样我就不写了
主要步骤我写完了,咱们试试打包文件输入 npm run build 打包文件
在这里插入图片描述
没有问题, 跑一下项目看看 npm run dev

会报一个错,就是找不到文件
少了一步