https://www.cnblogs.com/fqh123/p/11981646.html
假如要單獨將登陸頁面當成一個項目入口文件:
第一步:創建一個登陸頁面的文件
在項目public文件夾下創建一個login.html,其實就是將index.html複製一份,將title改一下:
第二步:在src文件夾下創建一個login文件夾,分別創建login.main.js、login.router.js、login.vue三個文件
三個文件內容如下:
login.main.js: 仿照main.js
import Vue from 'vue'; import login from './login.vue'; import router from './login.router'; // import store from './store'; Vue.config.productionTip = false; new Vue({ router, render: h => h(login), }).$mount('#login');
login.router.js (仿照router.js)
import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ routes: [ { path: "/", name: "home", component: () => import(/* webpackChunkName: "home" */ "../views/Home.vue"), meta:{ title:"首頁" } }, ], });
login.vue (仿照App.vue)
<template> <div id="login"><router-view></router-view> </div> </template> <script> export default { data(){ return{ } } } </script> <style scoped> </style>
第三步:配置vue.config.js
在module.exports里加上入口配置:
pages: {//配置多頁面入口 login: { entry: 'src/login/login.main.js', template: 'public/login.html', }, index: { entry: 'src/main.js', template: 'public/index.html', }, },
然後運行訪問:localhost:port/login.html/#/即可!!!
打包看看!!!
主入口頁面和登錄入口頁面都用了home.vue,只要chunckname一樣,就只打包一份js,很滿意!
nginx上這樣配置:
root C:\Users\hoohui_qianduan\Desktop\littleDemo-mianshi\vueAllDemo\dist; location /login { index login.html login.htm; try_files $uri $uri/ /login.html; } location / { index index.html index.htm; try_files $uri $uri/ /index.html; }
vue.config.js中的靜態資源訪問路徑這樣配置:
publicPath: process.env.NODE_ENV === 'production'? '/': '/',//靜態資源訪問路徑
/ :代表從root根路徑訪問 是絕對路徑 靜態資源訪問路徑永遠都是localhost:port/static.....
./ :代表相對路徑 相對於地址欄的路徑 假如地址欄上是localhost:port/login 那麼靜態資源的訪問路徑就是 localhost:port/login/static.....
/dist/ :也是相對路徑 代表靜態資源路徑在 root的dist文件夾下