vue项目打包部署到nginx 服务器上

假如要实现的效果如下

　　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