package.json
:
{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } }
你可以通过 npm 或 Yarn 调用这些 script:
npm run serve # OR yarn serve
vue-cli-service serve
本地启动服务调试网站
用法:vue-cli-service serve [options] [entry]
选项:
--open 在服务器启动时打开浏览器
--copy 在服务器启动时将 URL 复制到剪切版
--mode 指定环境模式 (默认值:development)
--host 指定 host (默认值:0.0.0.0)
--port 指定 port (默认值:8080)
--https 使用 https (默认值:false)
vue-cli-service build
打包网站
用法:vue-cli-service build [options] [entry|pattern]
选项:
--mode 指定环境模式 (默认值:production)
--dest 指定输出目录 (默认值:dist)
--modern 面向现代浏览器带自动回退地构建应用
--target app | lib | wc | wc-async (默认值:app)
--name 库或 Web Components 模式下的名字 (默认值:package.json 中的 "name" 字段或入口文件名)
--no-clean 在构建项目之前不清除目标目录
--report 生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch 监听文件变化
设置环境变量
你可以替换你的项目根目录中的下列文件来指定环境变量:
.env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略
一个环境文件只包含环境变量的“键=值”对:
FOO=bar VUE_APP_SECRET=secret
被载入的变量将会对 vue-cli-service
的所有命令、插件和依赖可用。
为一个特定模式准备的环境文件 (例如 .env.production
) 将会比一般的环境文件 (例如 .env
) 拥有更高的优先级。
示例:Staging 模式
假设我们有一个应用包含以下 .env
文件:
VUE_APP_TITLE=My App
和 .env.staging
文件:
NODE_ENV
– 会是 "development"
、"production"
或 "test"
中的一个。
NODE_ENV=production VUE_APP_TITLE=My App (staging)
vue-cli-service build
会加载可能存在的.env
、.env.production
和.env.production.local
文件然后构建出生产环境应用;vue-cli-service build --mode staging
会在 staging 模式下加载可能存在的.env
、.env.staging
和.env.staging.local
文件然后构建出生产环境应用。
这两种情况下,根据 NODE_ENV
,构建出的应用都是生产环境应用,但是在 staging 版本中,process.env.VUE_APP_TITLE
被覆写成了另一个值。
客户端使用方式
console.log(process.env.VUE_APP_TITLE)
参考: