㈠ vue的多页面配置
如何使用项目
项目改造过程
可以通过/sign,/test访问页面 7. 上面这种模式打包上线的时候需要后台的配置，(比如打包后的文件都在build文件夹下),nginx配置如下
server {
listen 3088;
server_name localhost;
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
root /usr/share/nginx/html/build;
index index.html index.htm;
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
location /sign {
try_files $uri $uri/ /sign.html;
}
location /test {
try_files $uri $uri/ /test.html;
}
}
上面的配置就能直接访问www.host:3388/sign,www.host:3388/test,这样整体的多页面配置就完成了。
通过node启动一个服务器来渲染多个html页面
㈡ Vue多页面应用配置
最近由于工作驱动，项目包含pc端及mobile端，pc端和mobile端核心功能一致，最大的不同是UI,为了减少维护的成本，决定使用Vue的多页面开发。
项目线上部署在一个子目录下，为了解决在本地和线上路径保持一致，需要修改一些配置。所以以此篇文章来记录一下配置过程中的问题。
这里是我放在github上的项目，里面有整个配置文件。感兴趣的朋友可以参考一下： vue-multiple-page
此篇文章记录了先在根路径下的多页面配置，再从根路径修改成子路径的配置
vue脚手架vue-cli3及以上；
在本地用vue-cli新建一个项目；
vue3.js :路由配置修改的是 history: createWebHistory('/mobile/')
vue3.js :路由配置修改的是 history: createWebHistory('/e/')
mobile端mobile.js的base修改成 base: '/e/mobile'
vue3.js :路由配置修改的是 history: createWebHistory('/e/mobile')
特别注意的地方