怎么设置"dev": "vue-cli-service serve --mode dev",

时间: 2023-08-29 18:06:53 浏览: 275

vue - vue.config.js中devServer配置方式

在Vue.js开发过程中，`vue.config.js` 文件是用于配置项目的，特别是对于开发环境的设置。其中，`devServer` 配置对象是至关重要的，因为它控制着开发服务器的行为，包括如何处理跨域请求、代理服务器设置以及端口选择等。下面我们将详细探讨 `devServer` 的配置方法。 ### 1. 解决跨域问题跨域是Web开发中常见的问题，由于浏览器的安全策略，不同源的请求会被阻止。`devServer.proxy` 可以帮助我们在开发环境中解决这个问题。例如： ```javascript devServer: { open: false, proxy: { '/nuojinadm/': { target: 'http://192.168.0.11/', changeOrigin: true } } } ``` 这里，`/nuojinadm/` 是前端发送请求时的路径前缀，所有匹配这个路径的请求都会被代理到 `http://192.168.0.11/` 这个服务器上。`changeOrigin: true` 表示允许跨域，这使得前端可以正常获取后端的数据。 ### 2. 配置axios的baseUrl 在使用axios进行API请求时，我们可以根据开发环境和生产环境的不同设置 `baseUrl`。当配置了 `devServer.proxy`，axios的 `baseUrl` 应设为空字符串，以便所有请求都能匹配到代理设置： ```javascript const baseUrl = { dev: '', pro: '/api' } ``` ### 3. 代理多个接口如果项目中需要连接多个不同的IP端口，可以在 `devServer.proxy` 中配置多个代理规则： ```javascript devServer: { open: false, port: 8801, proxy: { '/proxy1/adm/': { target: 'http://192.168.0.xx:xxxx/', changeOrigin: true }, '/proxy2/adm/': { target: 'http://192.168.0.xx:xxxx/', changeOrigin: true }, '/httpsProxy3/config/': { target: 'https://xx.xx.com', secure: false, // 对于https协议，需要设置为false changeOrigin: true } } } ``` ### 4. axios请求配置在每个需要发送请求的页面中，可以定义一个常量来保存请求路径，然后在axios请求中引用它： ```javascript const proxyxxx = '/xxx/xxx'; export const getBannerList = params => { return axios.request({ url: `${proxyxxx}/banner/v1/banner/${params.pageSize}/${params.pageNum}`, params, method: 'get' }); }; ``` 这样，即使接口地址改变，只需要更新 `proxyxxx` 的值即可，无需修改每个请求的代码。总结来说，`vue.config.js` 中的 `devServer` 配置是开发环境的关键设置，通过代理配置可以方便地处理跨域问题，同时结合axios的 `baseUrl` 配置，使得前后端分离的项目在开发阶段能够顺畅地进行数据交互。正确理解并灵活运用这些配置，将极大地提升开发效率。

在 Vue.js 项目中，可以在 package.json 文件中的 scripts 属性中添加 "dev": "vue-cli-service serve --mode dev"。这样，在终端中运行 npm run dev 命令即可启动 Vue.js 应用程序的开发服务器。其中，--mode dev 表示使用开发环境模式启动应用程序，这样可以在开发过程中自动加载一些开发相关的功能。

阅读全文

怎么设置"dev": "vue-cli-service serve --mode dev",

相关推荐

详解vue-cli脚手架build目录中的dev-server.js配置文件

vue – vue.config.js中devServer配置方式

怎么让"serve": "vue-cli-service serve",变成"dev": "vue-cli-service serve --mode dev",

C:\Users\admin\geeyoukindergarten\geeyoou-ui>npm run Scripts available in geeyoou@3.8.1 via npm run-script: 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

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! intellect-web@0.1.0 serve: vue-cli-service serve --mode dev npm ERR! Exit status 1

vue-cli-service serve --mode dev

vue-cli多环境

vue-cli3全面配置详解

vue-cli3分环境打包

Vue-cli3多页面配置详解

vue-cli3环境变量与分环境打包的方法示例

使用vue-cli 3.x进行项目的打包和优化

vue-cli 配置多环境

之前启动的vue命令为--env=dev成功了 现在在后面加上--env=dev --mode develop怎么报错了

深入浅析vue中cross-env的使用

Vue项目实战：接口错误拦截与环境设置

vue2 cli不同命令启动不同环境

vue怎么开启Webpack的开发者模式（dev mode）

最新推荐

浅谈vue项目,访问路径#号的问题

A级景区数据文件json

使用Java编写的坦克大战小游戏.zip学习资料

JHU荣誉单变量微积分课程教案介绍

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

如何在ZYNQMP平台上配置TUSB1210 USB接口芯片以实现Host模式，并确保与Linux内核的兼容性？

Naruto爱好者必备CLI测试应用

"互动学习：行动中的多样性与论文攻读经历"

【强化学习损失函数探索】：奖励函数与损失函数的深入联系及优化策略

之前启动的vue命令为--env=dev成功了现在在后面加上--env=dev --mode develop怎么报错了