开心每一天

Appearance

vue-cli 分环境打包 ​

vue-cli 参考文档：https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-build

package.json ​

假如你有这样一个 package.json 文件：

shell
"scripts": {
    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    # 上面这个 build:prod 和下面的一样，不写的话默认就是 --mode production
    #"build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode production",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
}

假如你有这样一个 .env.production 环境配置文件

shell
VUE_APP_TITLE = 应用标题

# 有可能你的 .env.production 里面没有写 NODE_ENV = production 这一项
# 因为 vue-cli-service build 默认等价于 vue-cli-service build --mode production
# 而 NODE_ENV 默认也就是 production
NODE_ENV = production

# 后台接口前缀（nginx 代理的时候需要这个路径）
VUE_APP_BASE_API = '/prod-api'

# 前端应用访问根路径。例如使用前缀 /admin/，前端访问的时候就是 http://localhost:80/admin/index.html
# 这个影响 ajax 或项目中使用到 base_path 的地方，一般都是定义一个 VUE_APP_CONTEXT_PATH 变量然后在各处引用，这样就可以随意修改了。
VUE_APP_CONTEXT_PATH = '/'

你想打包一个使用 .env.development 环境的发布包部署到 nginx 子目录中，你需要做以下修改：

1、package.json 增加下面的 script，指定 --mode 为 development ​

shell
"build:dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode development",

# 完整 scripts 如下：
"scripts": {
    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build:dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode development",
    "build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    # 上面这个 build:prod 和下面的一样，不写的话默认就是 --mode production
    #"build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode production",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
}

2、.env.development 内容如下 ​

shell
VUE_APP_TITLE = 应用标题

# 指定为生产环境配置（这个必须配置为 NODE_ENV = production，如果没有这项配置，则需要新增加)
# 否则打包就不是可以放到 nginx 下代理的期待包，有可能缺失 src 下自己写的 vue 组件。
NODE_ENV = production

VUE_APP_BASE_API = '/dev-api'

VUE_APP_CONTEXT_PATH = '/dev/'

打包 ​

shell
npm run build:dev