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

　

vue项目打包部署到nginx 服务器上的相关教程结束。