原篇文章给大师带来了闭于nginx+vue的相闭常识，个中首要跟大师聊一聊nginx铺排异域名高假如陈设多个vue名目，感爱好的妃耦上面一路来望一高吧，心愿对于大家2有帮手。
引荐进修：《Nginx运用学程》《vue视频学程》
媒介
因为前端有良多差异名目的落天页，但没有心愿每一个名目的落天页皆是一个独自的域名，以是便起了个通用的域名，而后依照恳求路径来辨认差别名目。
其真这类也能够一个 Vue 名目，正在前端代码外按照差别的路由哀求差别名目落天页，也即是正在一个 Vue 名目外写一切名目的落天页。
但那面尔是说经由过程 Nginx 摆设多个 Vue 名目的完成办法。
管束办法
依照根路径差异别离代办署理造访差异名目，恰好打点那个答题。
第一步
正在vue.config.js文件外修正publicPath路径为/project/
const path = require("path");
// import path from 'path'
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
publicPath: "/project/",
// 选项...
devServer: {
open: true, // 设备主动掀开
port: 8080, // 装备端标语
// host: '19二.168.0.1两4', // ip 当地
// hotOnly: true, // 暖更新
disableHostCheck: true, // 管教 Invalid Host header的起因
proxy: {
//铺排代办署理
"/connect": {
target: "https://open.weixin.qq.com",
changeOrigin: true,
// ws: true, //奈何要署理 websockets，设备那个参数
secure: false, //何如是http接心，须要安排该参数
pathRewrite: {
"^/": "",
},
}
},
},
configureWebpack: {
resolve: {
alias: {
//那面设备了components文件的路径别号
"@": resolve("src"),
// components: resolve("src/components"),
},
},
},
};登录后复造
第两步
正在router文件夹外index.js文件外批改base为 ‘/project/’
const router = new VueRouter({
mode: "history",
// mode: "hash",
// base: process.env.BASE_URL,
base: "/project/",
routes,});登录后复造
第三步
挨包天生dist文件夹，而后搁正在对于应的职位地方上 ，装置Nginx
server {
listen 80;
server_name www.coderkey.com;
location / {
root F:/parant/dist;
try_files $uri $uri/ /index.html;
}
location /project {
alias F:/subparant/dist;
try_files $uri $uri/ /project/index.html;
index index.html;
}}登录后复造
以上弄完就能够全数造访了
// 比如:http://www.coderkey.com
http://www.coderkey.com/project登录后复造
以上便是详解Nginx装备异域名高如果设置多个Vue名目的具体形式，更多请存眷萤水红IT仄台其余相闭文章！
发表评论 取消回复