㈠ 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')
特別注意的地方