vue 打包项目在多个环境部署

        前期在Linux服务器部署了测试环境，现在需要在服务器上部署生成环境，在部署的时候使用Nginx做代理，前端资源出现无法加载的情况，查看网上资料，发现部署同一台服务器要分环境进行打包。

具体配置如下：

 1、在项目根目录下分别新建.end.devlopment、end.production、end.staging三个文件：  

# 页面标题
VUE_APP_TITLE = app_title

NODE_ENV = 'development'

# 开发环境配置
ENV = 'development'

#系统/开发环境
VUE_APP_BASE_API = '/dev-api'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

2、vue.config.js中配置：

module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  publicPath: process.env.NODE_ENV === "production" ? "/xxx/" : (process.env.NODE_ENV === "staging" ? "/xxx-stage/" : "/xxx-dev/"),

3、packing.json中配置

{
  "name": "EnName",
  "version": "3.8.2",
  "description": "ZhName",
  "author": "AuthName",
  "license": "MIT",
  "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"
  },

  4、router.js中添加base

export default new Router({
  base: process.env.NODE_ENV === "production" ? "xxx" : (process.env.NODE_ENV === "staging" ? "xxx-stage" : "xxx-dev"),
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

 5、store/modules下修改：

export const loadView = (view) => {
  if (process.env.NODE_ENV === 'development') {
    return (resolve) => require([`@/views/${view}`], resolve)
  } else if (process.env.NODE_ENV === 'staging') {
    return (resolve) => require([`@/views/${view}`], resolve)
  } else {
    // 使用 import 实现生产环境的路由懒加载
    return () => import(`@/views/${view}`)
  }
}

6、打包：

生成环境：npm run build:prod

测试环境：npm run build:stage

本地运行：npm run dev