Vue——记一次vue程序发布

 

1、开发环境运行 vue

npm run dev

这源自于 package.json 中的配置

"scripts": {
  
    "dev": "vue-cli-service serve",
  
    "build:prod": "vue-cli-service build",
  
    "build:stage": "vue-cli-service build --mode staging",
  
    "preview": "node build/index.js --preview",
  
    "lint": "eslint --ext .js,.vue src"

},

dev环境，对服务端访问的管理源自于vue.config.js文件中的重定向，如图，

 

 

2、打包 stage 环境运行

 npm run build:stage

会生成 dist 文件夹，把它放进nginx

由于环境配置文件 .env.staging 的存在

VUE_APP_TITLE = 管理系统


NODE_ENV = production


ENV = 'staging'


VUE_APP_BASE_API = '/stage-api'

使得对 服务端 的访问都会以 /stage-api 开始，这就需要在nginx中做好代理，配置如下：

server {
    listen       9033;
    server_name  localhost;

    location / {
        root   H:\\git\\proj-vue\\dist;
        index  index.html index.htm;

        # autoindex on;
        # autoindex_exact_size on;
        # autoindex_localtime on;
    }

    location /stage-api/ {
        proxy_pass http://127.0.0.1:8002/;
    }

       
}

以 http://localhost:9033 访问web，以http://localhost:9033/stage-api/ 访问服务端。