vue 打包eladmin

package.json 文件中配置开发环境与生产环境

"scripts": {
    "dev": "vue-cli-service serve",        //开发调试环境
    "build:prod": "vue-cli-service build",  //生产运行环境
	"build:dev": "vue-cli-service build  --mode development",//开发运行环境
	...

1、生产环境打包
.env.production 文件配置

ENV = 'production' 
NODE_ENV='production'
# 接口地址
VUE_APP_BASE_API  = 'http://localhost:90' //配置接口地址，这里采用Nginx反向代理，配置与前端一致的端口
VUE_APP_WS_API = 'ws://localhost:90' //配置接口地址，这里采用Nginx反向代理，配置与前端一致的端口
VUE_APP_ENCRYPTION = '1'  //本地加密
# 是否启用 babel-plugin-dynamic-import-node插件
VUE_CLI_BABEL_TRANSPILE_MODULES = true

nginx反向代理配置

server {
        listen       90;
        server_name  localhost; 
        #charset utf-8; 
        #access_log  logs/host.access.log  main; 
        index index.html;
        root  E:/project-java/eladmin-web-master/eladmin-web-master/dist ;  #dist上传的路径 
        # api反向代理
		location /api {
           #root   html;
           #index  index.html index.htm;
           proxy_set_header Host $host;
           proxy_set_header X-Real-Ip $remote_addr;
           proxy_set_header X-Forwarded-For $remote_addr;
           proxy_pass http://192.168.1.186:8888;
        }  
         # auth 反向代理
		location /auth {
           #root   html;
           #index  index.html index.htm;
           proxy_set_header Host $host;
           proxy_set_header X-Real-Ip $remote_addr;
           proxy_set_header X-Forwarded-For $remote_addr;
           proxy_pass http://192.168.1.186:8888;
        } 
		
        # 避免访问出现 404 错误
        location / {
          try_files $uri $uri/ @router;
          index  index.html;
        }
        location @router {
          rewrite ^.*$ /index.html last;
        }  

2、开发环境打包

ENV = 'development'
NODE_ENV='development'
#接口地址
VUE_APP_BASE_API  = 'http://localhost:8888'
VUE_APP_WS_API = 'ws://localhost:8888'
VUE_APP_ENCRYPTION = '1'
#是否启用 babel-plugin-dynamic-import-node插件
VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/utils/request.js程序做判断

const service = axios.create({ 
  baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url 
  timeout: Config.timeout // 请求超时时间
}) 

若开发环境采用本地根目录路径，调用接口
并在vue.config.js调用api接口与auth接口采用代理服务跳转到真正的后台接口服务。

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/api': 'api'
        }
      },
      '/auth': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/auth': 'auth'
        }
      }
    }
  },

打包命令

生产环境： npm run build:prod
开发版： npm run build:dev