Vue项目运用webpack多环境配置的问题和本地开发跨域问题

最新推荐文章于 2023-07-31 16:07:05 发布

原创

最新推荐文章于 2023-07-31 16:07:05 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#跨域 #vue #多环境 #环境配置

本文详细介绍了在Vue项目中如何进行多环境配置，包括初始化项目、环境参数传递、引入环境参数，以及在本地开发时如何解决跨域问题。通过使用Webpack的DefinePlugin插件动态加载环境配置，并利用Node.js代理服务器解决跨域问题。

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

实际运用场景

在我们开发前端应用中，往往需要使用多个环境，例如

1.本地开发环境

2.测试环境

3.正式环境

所以每个环境都需要对相应的服务器地址、环境专属变量等做出单独的配置。

Vue项目

1.初始化

我们使用vue-cli init生成的项目，调试与打包已经为我们在package.json中做好了。

/* /package.json */
"scripts": {
    "dev": "webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run e2e",
    "build": "node build/build.js",
  }

* 之前遇到的问题：本地调试 localhost:8080 可正常访问，但是使用本机ip（http://192.168.*.*:8080）无法访问；

解决方法：在package.json中dev命令加上 0.0.0.0 ；

* 这里想特别说明一下的是，vue-cli脚手架帮我们生成好了整个项目，而且也有对应webpack.dev.conf.js和webpack.prod.conf.js两个分离的webpack配置文件，但由于文件的命名问题（dev.conf.js/prod.conf.js），很容易让人误以为这两个文件就是webpack针对不同环境的配置。但实际上这两个文件一个是用于本地调试时的配置文件，另一个是用于打包部署的配置文件。调试/打包两种模式与环境（dev/test/pre/prod等）是可以相互组合的。理论上来讲这两个webpack的配置文件我觉得应该叫webpack.debug.conf.js和webpack.build.conf.js会更贴切一点。