vue分环境部署

vue部署

1、相关配置

staging可以认为是测试环境，production可以认为是正式环境

这里注意，env.staging的NODE_ENV需要填写，否则在vue.config.js的配置中会出现问题

vue.config.js需要进行配置，多环境的时候，这里主要看具体的情况，根据具体情况去设计，我这里是有两个环境，需要部署在同个服务器上，所以需要生成不同的包

2、查看package.json脚本，并执行

假设我这里是部署测试环境，则使用
npm run build:stage
执行之后则会生成一个文件夹

里边存放着编译后的东西

3、检查vue的router.js

有的是放在router下的index.js ，将mode改成hash
否则会出现部署之后访问页面404问题

export default new Router({
  //mode: 'history', // 去掉url中的#
  mode: 'hash', 
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

4、将编译后的文件夹放到linux服务器上，并记住存放位置

例如我是放在这个位置的,具体的上传方式很多，可以使用xshell，也可以使用finalShell，这里就不细讲
在这里插入代码片

5、配置nginx

这里自己找一下自己的nginx.conf文件
如果不知道nginx安装在哪的话，使用ps -ef|grep nginx

就可以找到路径了，放在conf/nginx.conf目录下

user  root;
worker_processes  1;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;

    keepalive_timeout  65;


    server {
  # 端口
        listen       81;
        server_name  localhost;

  # nginx的默认页面
        location / {
            root   html;
            index  index.html index.htm;
        }

# 这里配置的是测试服的，也就是说当你访问 ip:81/test-qd-web的时候，
# 他就会/opt/test/qd_cold_chain/test-qd-web 文件夹下查找文件
        location /test-qd-web {
               root /opt/test/qd_cold_chain;
               index index.html index.htm;
        }

# 同上，正式服的
        location /qd_web {
               root /opt/qd_cold_chain;
               index index.html index.htm;
        }
        

    }



}

6、重载nginx

进入到nginx的sbin目录下，执行./nginx -s reload

7、访问目录

ip:端口/test-qd-web
访问成功就ok了

问题

1、如果实在找不到目录，可以尝试关闭，再重启nginx

• 查看nginx的pip

ps -ef | [grep](https://so.csdn.net/so/search?q=grep&spm=1001.2101.3001.7020) nginx

• 杀死进程

kill -9 12819
kill -9 12820

• 之后再进行sbin中，启动nginx

./nginx

3、vue项目部署后刷新网页报404错误解决

原因：因为route.js中使用的是history模式，需要将其改成hash

export default new Router({
  //mode: 'history', // 去掉url中的#
  mode: 'hash', 
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})