假如要实现的效果如下

  http://ip/vue    =>是进入首页访问的路径是  usr/local/nginx/html/vue

  http://ip/website     =>是进入首页访问的路径是  usr/local/nginx/html/avue

2、打包前在相应的没打包文件中加入如下 

  

vue目录下的文件没打包前的路由 index.js文件中加

    export default new Router({
mode: 'history',
base:"/vue" //这里后面没有加“/”,与nginx的不同方法配置有关 用的‘root’
routes: [
avue目录下的文件没打包前的路由 index.js文件中加 export default new Router({
mode: 'history',
     base: '/website/' //这里后面加“/”,与nginx的不同方法配置有关 用的“alias”
      routes: [

html目录下的文件没打包前的路由 index.js文件中加

      export default new Router({
mode: 'history',
routes: [

2、假如 vue打包后的文件放在 usr/local/nginx/html下结构如下

html
-vue
-static
-index.html
-avue
-static
-index.html
   -static
   -index.html

3、nginx的相应配置

location /{
root html;
try_files $uri $uri/ /index.html; #这里解决路由刷新后找不到页面的问题
index index.html index.htm;
}
location /vue{
root html;
try_files $uri $uri/ /vue/index.html; #这里解决路由刷新后找不到页面的问题
index index.html index.htm;
}
location /website {
alias /usr/local/nginx/html/avue;
try_files $uri $uri/ /website/index.html; #这里解决路由刷新后找不到页面的问题
     index index.html index.htm; autoindex on; }

4、进入首页面找到不到相应js,css加载文件。 

这里最简单的方法是直接修改打包好的文件中的index.html
如 vue/index.html 中的加载的文件中 <script type=text/javascript src=/static/js/app.39a70a1be7abbcb8f4c5.js></script>
修改成
<script type=text/javascript src=/vue/static/js/app.39a70a1be7abbcb8f4c5.js></script> 如:avue/index.html 也作相应的修改 路径 前面加 “/avue” 当然 如果访问的是 http://ip/ 前面没有路径 当然也就不用修改了

 这样就可以访问三个不同vue工程

http://ip
http://ip/vue
http://ip/website

 

vue项目打包部署到nginx 服务器上的更多相关文章

  1. Vue项目打包部署到apache服务器

    vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...

  2. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  3. vue项目怎么搭建到云服务器上

    链接1:https://blog.csdn.net/qq_37741554/article/details/87560823 linux下载安装node.js 链接2:https://blog.csd ...

  4. vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题

    本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...

  5. vue项目 打包部署上线

    1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...

  6. 解决Vue项目打包之后放到nginx下刷新就报错404的问题

    最近跟着某机构的教学视频敲了一遍vue项目,但是在windows环境下部署的时候就懵逼了放到nginx下正常跑没问题,但是刷新之后就报404错误 前端项目构建vue 脚手架版本 是@vue/cli 4 ...

  7. vue项目打包部署elementUI的字体图标丢失问题

    自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...

  8. vue项目打包部署到服务器,静态资源文件404

    js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...

  9. openfire源码修改后如何打包部署到linux服务器上

    原文:http://blog.csdn.net/jinzhencs/article/details/50457152 1.linux版本的3.10.3解压部署启动(过程略,参考我的另一篇博文http: ...

随机推荐

  1. C语言实现日历输出

    这个还是挺实用的.... 头文件: #ifndef MAIN_H #define MAIN_H #include "stdio.h" #include "math.h&q ...

  2. 整数快速幂hdu(1852)

    hdu1852 Beijing 2008 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/65535 K (Java/Others ...

  3. Win10安装软件时出现2502、2503错误代码的问题

    主要是权限不够,C:\Windows\temp先访问权限 找到该目录,选择temp文件夹,右键弹出快捷菜单,选择“管理员取得所有权”.确定,OK. 再安装软件OK.

  4. 解决IE7下scroll的bug

    IE7下scroll滚动问题 没法撑开 ie7下没办法撑开div; 即是设置了overflow-y:scroll; 解决版本:给设置scroll的容器加上position:relative

  5. ffmpeg 推送、保存rtmp 流命令

    1.将文件当做直播送至live ffmpeg -re -i localFile.mp4 -c copy -f flv rtmp://server/live/streamName 2.将直播媒体保存至本 ...

  6. EasyUI +MVC +EF实现增删改查

    OA项目的框架已经搭建好了,接下来就是在这个框架下完成相应的业务的编码,接下来实现UserInfo页面的增删改查. 1.首先先谈一下遇到的一个框架上的问题:提示EF版本不一致之类的问题,主要是解决方案 ...

  7. pta 习题集 数列求和-加强版

    给定某数字AA(1≤A≤91≤A≤9)以及非负整数NN(0≤N≤1000000≤N≤100000),求数列之和S=A+AA+AAA+⋯+AA⋯AS=A+AA+AAA+⋯+AA⋯A(NN个AA).例如A ...

  8. pickle库的使用

    http://www.php.cn/python-tutorials-372984.html

  9. Python开发【模块】:Urllib(二)

    Urllib实战 1.爬取糗事百科中段子和用户名: 代码实例: # 爬取网站页面内容 import re import urllib.request url = 'https://www.qiushi ...

  10. Day04 dom详解及js事件

    day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证   上次课内容回顾: JS中ECMAScript用法: JS定义变 ...