vue-clic创建vue项目

可以创建vue2和vue3项目,可以看文章安装vue-cli2和3以及创建vue2和vue3项目的步骤及区别
可以用vue init webpack pro1创建vue2项目,(这种方式创建的 vue和webpack版本分别为
"vue": "^2.5.2","webpack": "^3.6.0","webpack-dev-server": "^2.9.1","vue-router": "^3.0.1"

也可以用最新的vue-cli命令vue create pro2
创建vue2("vue": "^2.6.14","webpack": "^5.54.0","webpack-dev-server": "^4.11.1","vue-router": "^3.5.1", "vuex": "^3.6.2")
vue3项目("vue": "^3.2.13","webpack": "^5.54.0","webpack-dev-server": "^4.11.1","vue-router": "^4.0.3", "vuex": "^4.0.0",)

我们主要看vue-cli2和vue3+打包出来的vue2项目

打包出来的文件直接在浏览器打开

  1. vue-cli2+打包出来的项目,在浏览器上打开报错
    在这里插入图片描述
    解决办法:
    在config文件夹下的index.js中修改 assetsPublicPath: ‘./’

vue-cli3在vue.config.js中加publicPath:'./'

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath:'./'
})

vue 不同环境打包 配置不同

vue-cli2+打包的项目

工具:cross-env

工具:cross-env:运行跨平台设置和使用环境变量的脚本
理解:当您使用NODE_ENV =production, 来设置环境变量时,大多数Windows命令提示将会阻塞(报错)。这个迷你的包(cross-env)能够提供一个设置环境变量的scripts,让你能够以unix方式设置环境变量,然后在windows上也能兼容运行。

1. 安装cross-env
npm install --save-dev cross-env
2. 建立环境配置

默认config文件夹有三个文件,dev.env.js/index.js/prod.env.js
打包不同环境设置不同变量,比如,打sit包,uat包,对生产加不同变量文件配置
config->prod.sit.env.js文件

'use strict'
module.exports = {
  // 生产环境,上线时使用此配置
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  KEY: '"2222222PRODDEVSHKLO667DDDD"'
}

config->prod.uat.env.js文件

'use strict'
module.exports = {
  // uat环境专用配置
  NODE_ENV: '"production"',
  ENV_CONFIG: '"uat"',
  KEY: '"33333333UATVSHKLO667DDDD"'
}

环境变量也可以引入变量;比如:
可以把请求的路径设置成变量,在命令行中去赋值

"build:test": "cross-env NODE_ENV=production env_config=test request_url=https://111.222.com  node build/build.js"


const {request_url = ""} = process.env;
module.exports = {
    NODE_ENV: '"production"',
    BASE_API: `'${request_url}'`
};

env配置文件,不是在浏览器运行的,也不会打包进最终的代码,它只是对于项目编译的控制,所以拿不到window

3. 在npm脚本中使用
"build--sit":"cross-env NODE_ENV=production  ENV_CONFIG=sit  node build/build.js",
"build--uat":"cross-env NODE_ENV=production  ENV_CONFIG=uat  node build/build.js",
"build--dev":"cross-env node build/build.js",
4.webpack打包文件解析打包命令

通过打包命令(比如:npm run build--uat),获取到NODE_ENV=production ENV_CONFIG=uat两个参数
在build -> webpack.prod.conf.js文件中获取命令行参数,并引入配置

const env = process.env.ENV_CONFIG ? 
require('../config/prod.' + process.env.env_config + '.env') : 
require('../config/prod.env')

5.在项目中使用变量
<template>
  <div id="app">
    测试环境变量{{ test }}
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return {
      test: process.env.KEY,
    }
  }
}
</script>
6.打包文件成功引用对应环境变量

在这里插入图片描述
webpack-dev-server2+ 不支持–mode参数

vue-cli3+打包的项目

一、通过在项目的根目录下新建 .env.xxx 文件,–mode去识别环境变量的方式
  1. 在项目的根目录下新建 .env.xxx 文件
    在这里插入图片描述
    如上,四个 .env.xxx 文件后缀名(文件后缀名可自定义)为development、prod、prod.uat、test,可分别对应为开发环境、生产环境、uat环境和测试环境。可以根据需要自由创建,只要到时候对应到命令行中,能找得到就行

  2. 每个环境都会加载的变量 .env
    如果还需要设置每个环境都需要加载的变量,则可以添加 .env 文件,如果没有,则可以不建此文件。(即每个环境对应变量的变量值都是一样的时候,则可以将变量定义在公用的.env文件中,而对应每个环境的 .env.xxx文件中则不需要再重复定义此变量)

  3. 在对应环境的 .env.xxx 文件中添加变量
    .在.env.xxx 文件中只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

  • NODE_ENV : 主要用于标识当前的环境
  • BASE_URL: vue.config.js 中的 publicPath 选项相符,即你的应用会部署到的基础路径
  • VUE_APP_* : 自定义变量

.env.development

NODE_ENV=development
VUE_APP_TESTID=121212development

.env.prod

NODE_ENV=production
VUE_APP_TESTID=1ddddddd

.env.prod.uat

NODE_ENV=production
VUE_APP_TESTID=UATtttt1ddddddd

可以根据需要,自由添加配置文件,只要命令行与文件名一致就行
4. package.json配置对应环境打包命令

"serve:dev": "vue-cli-service serve --mode development",
"serve:test": "vue-cli-service serve --mode test",
"serve:prod": "vue-cli-service serve --mode prod",
"serve:uat": "vue-cli-service serve --mode prod.uat",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode prod",
"build:test": "vue-cli-service build --mode test",

vue-cli-service build --mode test :命令中的test对应的是 .env.xxx 文件的后缀名,如果也找不到.env.test文件,则打包报错

注意,vue-cli2+打包的vue2项目没有–mode参数,不能用这种方式设置环境变量
5. 在vue组件中和index.html中使用变量

在inde.html中这么引入变量<%= VUE_APP_TESTID %>
在组件中还是这么引入process.env.VUE_APP_TESTID

二、通过cross-env的方式

思路还是一样的,命令行设置一个变量ENV_CONFIG=prod,在配置文件中获取,然后根据变量值,去获取对应的配置文件,然后赋值给process.env

  1. 安装cross-env
npm install --save-dev cross-env
  1. 建立环境配置
    新建config文件夹,新建prod.[对应命令行变量].env.js打包不同环境设置不同变量,比如,打sit包,uat包,对生产加不同变量文件配置
    config->prod.sit.env.js文件、config->prod.uat.env.js文件等
'use strict'
module.exports = {
  ENV_CONFIG: '"prod"',
  VUE_APP_KEY: '"2222222PRODDEVSHKLO667DDDD"'
}
  1. 在npm脚本中使用
"serve": "vue-cli-service serve",
"serve:test": "cross-env NODE_CONFIG=test vue-cli-service serve",
"build": "vue-cli-service build",
"build:env1": "cross-env NODE_CONFIG=prod vue-cli-service build",
"build:env2": "cross-env NODE_CONFIG=uat vue-cli-service build",
"lint": "vue-cli-service lint"
  1. webpack配置文件 vue.config.js 解析打包命令
    通过打包命令(比如:npm run serve:test),获取到NODE_CONFIG=test参数

在 vue.config.js文件中获取命令行参数,并引入配置

console.log(NODE_CONFIG)
const env = process.env.NODE_CONFIG? 
require('../config/prod.' + process.env.NODE_CONFIG+ '.env') : 
require('../config/prod.env')
console.log(env)

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': env
      })
    ]
  }

但是会报错重复定义process.env,后续还得查查怎么完善
在这里插入图片描述

  1. 在项目中使用变量

process.env.VUE_APP_KEY

Logo

前往低代码交流专区

更多推荐