Vue多页面应用与Nginx

Posted 2023-03-01

参考技术A npm run build 之后将 dist 放到nginx目录就行?

再多几个需求就不简单了:

一步一步来

假如 我们项目有两个入口: pc 与 mobile, 我们需要修改 这几个地方:

按照vue-cli的 官方文档 配置多入口并不难:

页面入口名字 即 mobile 只会影响在开发环境的入口: 现在需要使用 'localhost:3000/index' 和或者 'localhost:3000' 来进入 index 页面, 使用 'localhost:3000/mobile' 来进入 mobile 页面.

filename 会影响在生产环境中打包出来的入口文件(.html文件)路径. 值得注意的是 mobile . filename 字段: 我设置的是 mobile/index.html , 而不是 mobile.html , 这是有原因的, 在下面配置nginx时会说到.

配置好vue.config.js之后打开 'localhost:3000/mobile' 却发现空白, 进入不了mobile的路由.

查文档 VueRouterApi-base , 发现需要配置 base.

官方文档只是举了一个例子说部署在/app/下可以设置base, 但多页面也需要如此配置.

如下:

mobile.router.js

现在访问 localhost:3000/mobile 就能正常进入.

至此, 开发环境没问题了. 接下来是部署.

我使用nginx作为web容器部署前端项目, 其他服务器大同小异.

我们需要将 npm run build 打包出来的 dist 文件夹下的所有文件放置到nginx所在服务器的 /usr/share/nginx/html 目录下. (目录可以自定义)

nginx.conf

其中为了支持VueRouter的History模式, 我们需要按照官方文档配置: HTML5 History 模式 .

又得益于我们将 mobile 入口的输出文件地址修改为了 mobile/index.html , 正好访问 /mobile/ 时让Nginx打开 mobile/index.html 文件, 所以它足够简单.

如果你只有需求将项目部署在根目录, 那么现在便完成了.

假如需要将项目放入 www.example.com/app/ 下, 访问 www.example.com/app/ 进入index入口, 访问 www.example.com/app/mobile 进入mobile入口. 则在上述 ‘部署到根目录’ 基础之上还需要修改以下几项文件:

pages 中需要修改的是 两个入口名字, 修改为: app/index 与 app/mobile .

在上面说了, 页面入口名字 即 app/mobile 只会影响到开发环境访问入口: 现在在开发环境访问 localhost/app/mobile 才能进入 mobile 页面.

如果我们需要在生产模式也使用 domain/app/mobile 路径访问项目, 还需要修改: publicPath 和 outputDir

修改base, 如下:

mobile.router.js

A: 修改outputDir是为了不修改nginx配置. 不修改outputDir也是可行的, 那么需要修改nginx配置如下:

少改一个文件是一个, 所以我推荐修改 outputDir .