vue打包到生产环境

通过npmrunbuild在项目根目录进行生产环境打包,输出文件位于dist目录。然后全局安装serve服务,使用npminstall-gserve。最后运行servedist启动服务,展示生产环境构建结果。npmrundev则是用于开发环境的热更新构建。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.进入到项目根目录执行

  npm run build

此时会自动打包在dist目录下

2.安装服务

   npm  install -g serve

3.启动

   serve dist

在这里插入图片描述

以上是生产环境打包的过程。

npm run dev 是开发环境,

npm run build 是生产环境

### Vue 项目中区分生产环境和开发环境进行打包 #### 配置 `vue.config.js` 或者 `vite.config.ts` 为了实现生产和开发环境的自动识别与切换,在构建工具配置文件中设置不同的环境变量是一个常见做法。对于基于 Webpack 的 Vue CLI 项目,可以在 `vue.config.js` 中定义环境特定的配置项;而对于采用 Vite 构建系统的项目,则应在 `vite.config.ts` 文件里完成相应设定。 在 Vue CLI 项目中的 `vue.config.js` 可以通过如下方式来处理: ```javascript module.exports = { devServer: { proxy: 'http://localhost:8080' // 开发服务器代理设置 }, configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 修改生产模式下的配置 Object.assign(config.resolve.alias, { '@': path.resolve(__dirname, './src') }) } else { // 修改其他模式(如开发)下的配置 } } } ``` 而在 Vite 项目里的 `vite.config.ts` 则可以这样写: ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig(({ command }) => ({ plugins: [vue()], server: { port: 3000, open: true, proxy: { '/api': { target: process.env.DEV_API_SERVER || 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }, build: { rollupOptions: { output: { entryFileNames: `[name].${command}.js`, chunkFileNames: `[name]-[hash].${command}.js`, assetFileNames: `[name].[ext]?id=[hash]` } } } })) ``` 上述代码片段展示了如何根据不同命令(`serve` or `build`)调整输出路径名称[^1][^2]。 #### 使用 `.env` 文件管理环境变量 除了修改构建配置外,还可以利用`.env`系列文件(.env,.env.development,.env.production等),这些文件允许开发者轻松地为不同运行阶段指定独特的参数而不必硬编码到源码之中。例如: - .env.development: ```plaintext NODE_ENV=development API_URL=http://local.api.com/ ``` - .env.production ```plaintext NODE_ENV=production API_URL=https://real.api.com/ ``` 当执行 `npm run serve` 启动本地服务时会读取 `.env.development`; 而调用 `npm run build` 进行正式版编译则依据 `.env.production` 设置[^3]. #### 自定义脚本支持多环境部署 最后一步是在项目的根目录下找到 `package.json`, 并在此处添加自定义 NPM 命令以便于针对各个目标平台分别创建优化后的资源包。这通常涉及到向 `"scripts"` 字段追加额外条目,比如下面的例子所示: ```json { "scripts": { "serve": "vue-cli-service serve", "build:dev": "vue-cli-service build --mode development", "build:test": "vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode production" } } ``` 如此一来便可以通过简单的命令行指令快速切换至所需的工作流并生成适配当前上下文的应用版本[^4].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值