vue文件打包及nginx部署

2018-05-14

本篇记录一下 vue2打包及nginx部署

Nginx安装

安装网址 http://nginx.org/en/download.html

安装步骤 https://jingyan.baidu.com/article/39810a23b85dd4b636fda6eb.html

nginx命令

start nginx 启动并服务
tasklist /fi "imagename eqnginx.exe" 查看是否启动
nginx -s reload  改变配置文件时，需重启nginx工作进程
nginx -s stop 关闭服务
nginx -s quit 安全关闭
taskkill /F/IM nginx.exe 关闭所有nginx服务

Vue2文件打包hash路由

webpack配置文件config/index.js

// Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './',

将打包的dist文件放到ngnix目录下的html文件中然后localhost启动端口号

修改nginx/conf/nginx.conf的配置

server {
        listen       8088;  #自定义你服务器的端口号
        server_name  localhost;  #自定义你的IP或者域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   F:\Admin-ElementUI\dist;  #dist目录指向你本地的工作目录，相当重要
            index  index.html index.htm;  #打开默认文件为index.html
        }
}

Vue2文件打包history路由

webpack配置文件config/index.js

// Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',//绝对路径

roters

export default new Router({
  mode: 'history', //后端支持可开
  likActiveClass: 'link-active',
  routes: constantRouterMap
})

修改nginx/conf/nginx.conf的配置

server {
     listen       8088; #自定义你服务器的端口号
     server_name  localhost; #自定义你的IP或者域名

     #charset koi8-r;

     #access_log  logs/host.access.log  main;

    root   F:\Admin-ElementUI\dist; #dist目录指向你本地的工作目录，相当重要
    index  index.html index.htm; #打开默认文件为index.html
    #官网介绍设置这条可以解决history路由的问题
    location / {
        try_files $uri $uri/ /index.html;
    }
　　# 下面这些地址全部是nginx代理后台服务器的地址再转发给前端，解决跨域问题
    location /api {
         add_header 'Access-Control-Allow-Origin' '*';
         proxy_pass  https://www.easy-mock.com/mock
         /5ba33ae925504a0779f1e0e6/vue-element-admin;
    }
     # 模块2
    location /admin/{
        proxy_pass http://192.168.0.16:6810;
        add_header Content-Type "text/plain;charset=utf-8";
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST';
    }
}