vue构建多页面应用实例代码分享

这是我放在GitHub上的项目，里面有整个配置文件，可以参看一下：multiple-vue-page

准备工作

在本地用vue-cli新建一个项目，这个步骤vue的官网上有，我就不再说了。

这里有一个地方需要改一下，在执行npm install命令之前，在package.json里添加一个依赖,后面会用到。

修改webpack配置

这里展示一下我的项目目录

├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── package.json
├── src
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ ├── Hello.vue
│ │ └── cell.vue
│ └── pages
│ ├── cell
│ │ ├── cell.html
│ │ ├── cell.js
│ │ └── cell.vue
│ └── index
│ ├── index.html
│ ├── index.js
│ ├── index.vue
│ └── router
│ └── index.js
└── static

在这一步里我们需要改动的文件都在build文件下，分别是：

我就按照顺序放出完整的文件内容，然后在做修改或添加的位置用注释符标注出来：

utils.js文件

webpack.base.conf.js 文件

webpack.dev.conf.js 文件

webpack.prod.conf.js 文件

至此，webpack的配置就结束了。

但是还没完啦，下面继续。

文件结构

├── src
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ ├── Hello.vue
│ │ └── cell.vue
│ └── pages
│ ├── cell
│ │ ├── cell.html
│ │ ├── cell.js
│ │ └── cell.vue
│ └── index
│ ├── index.html
│ ├── index.js
│ ├── index.vue
│ └── router
│ └── index.js

src就是我所使用的工程文件了，assets,components,pages分别是静态资源文件、组件文件、页面文件。

前两个就不多说，主要是页面文件里，我目前是按照项目的模块分的文件夹，你也可以按照你自己的需求调整。然后在每个模块里又有三个内容：vue文件，js文件和html文件。这三个文件的作用就相当于做spa单页面应用时，根目录的index.html页面模板，src文件下的main.js和app.vue的功能。

原先，入口文件只有一个main.js,但现在由于是多页面，因此入口页面多了，我目前就是两个：index和cell，之后如果打包，就会在dist文件下生成两个HTML文件：index.html和cell.html(可以参考一下单页面应用时，打包只会生成一个index.html,区别在这里)。

cell文件下的三个文件，就是一般模式的配置，参考index的就可以，但并不完全相同。

特别注意的地方

cell.js

在这个文件里，按照写法，应该是这样的吧：

这个配置在运行时（npm run dev）会报错

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)

网上的解释是这样的：

运行时构建不包含模板编译器，因此不支持 template 选项，只能用 render 选项，但即使使用运行时构建，在单文件组件中也依然可以写模板，因为单文件组件的模板会在构建时预编译为 render 函数。运行时构建比独立构建要轻量30%，只有 17.14 Kb min+gzip大小。

上面一段是官方api中的解释。就是说，如果我们想使用template，我们不能直接在客户端使用npm install之后的vue。
也给出了相应的修改方案：

这里是修改package.json的resolve下的vue的配置，很多人反应这样修改之后就好了，但是我按照这个方法修改之后依然报错。然后我就想到上面提到的render函数，因此我的修改是针对cell.js文件的。

这里面我用render函数取代了组件的写法，在运行就没问题了。

页面跳转

既然是多页面，肯定涉及页面之间的互相跳转，就按照我这个项目举例，从index.html文件点击a标签跳转到cell.html。

我最开始写的是：

 <!-- index.html -->
<a href='../cell/cell.html'></a>

但这样写，不论是在开发环境还是最后测试，都会报404，找不到这个页面。

改成这样既可：

 <!-- index.html -->
<a href='cell.html'></a>

这样他就会自己找cell.html这个文件。

打包后的资源路径

执行npm run build之后，打开相应的html文件你是看不到任何东西的，查看原因是找不到相应的js文件和css文件。

这时候的文件结构是这样的：

├── dist
│ ├── js
│ ├── css
│ ├── index.html
│ └── cell.html

查看index.html文件之后会发现资源的引用路径是：

/dist/js.........

这样，如果你的dist文件不是在根目录下的，就根本找不到资源。

方法当然也有啦，如果你不嫌麻烦，就一个文件一个文件的修改路径咯，或者像我一样偷懒，修改config下的index.js文件。具体的做法是：

将这里面的

改成

酱紫，配置文件资源的时候找到的就是相对路径下的资源了，在重新npm run build看看吧。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

本文如未解决您的问题请添加抖音号：51dongshi（抖音搜索懂视），直接咨询即可。