vue项目最简单的打包方式就是：npm run dev,但是有时候会遇到多个环境且地址不同，比如本地开发环境， 开发环境和测试环境，预发环境等等地址各不相同，如果每次都让我们手动更改地址，然后进行打包，那是相当麻烦，下面就给大家介绍通过配置命令来进行切换地址

1.下载插件

npm install cross-env –save-dev

2.在config文件夹下面,按照如下进行修改

(1) test.env.js
image.png
(2) prod.env.js
image.png
(3) dev.env.js
image.png
如果还有预发环境或者其他环境，可以自己在config文件夹中创建文件，然后命名即可
（4） index.js
image.png
代码如下

        prodEnv: require('./prod.env'),
        testEnv: require('./test.env'),

3.在build文件夹下安装如下进行修改

(1).build.js
image.png

代码如下

var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )

（2）webpack.prod.conf.js

image.png
代码如下

const env = config.build[process.env.env_config+'Env']

4.在package.json中，按照如下进行修改

image.png

代码如下

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js",
    "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
    "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"

5.根据不同环境配置地址

image.png

6.打包命令

测试环境  npm run build--test
正式环境  npm run build--prod
# vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue