0.7、VUE-VUE 中的变量和启动模式

向右看齐 2022-09-03 14:26 68阅读 0赞

### 文章目录 ###

*   *   *  前言-项目结构
         *  Vue 中的变量
         *   *  查看所有的变量
             *  环境变量 HOST、PORT
             *  设置环境变量不生效？
         *  自定义变量
         *  使用 npm set 参数名
         *  启动命令

### 前言-项目结构 ###

在使用 vue init webpack \[项目名称\] 生成的项目中可以看到如下的项目结构  
其中比较重要的是 package.json,这个文件设定了诸如 npm run start 、npm build 这些命令简介调用的配置文件。显然，默认来看 npm run dev 就是本地运行，npm build 会自动加载prod环境的配置。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70]

### Vue 中的变量 ###

Vue 中调用变量名方式如下:

process.env.变量名

#### 查看所有的变量 ####

可以在 webpack.dev.conf.js 中增加下面的命令，这样在启动阶段就能查看目前项目所有可以访问的全局变量了

console.log(process.env)

#### 环境变量 HOST、PORT ####

> 在项目中我们可以看到 process.env.HOST 这些变量，它们在哪里设置呢？  
> 环境变量的命名没有什么特别限定，但是在获取时需要加上 process.env 前缀，即 process.env.环境变量名  
> Mac 中配置环境变量的文件为 : sudo vi ~/.bash\_profile  
> Windows 是计算机-属性-高级系统设置-环境变量

#### 设置环境变量不生效？ ####

重启一下 IDE 试试，比如Hbuilder 就有缓存，修改完环境变量之后，如果没有生效就重启一下 Hbuilder

### 自定义变量 ###

不同于环境变量的配置，有时我们需要根据环境来配置不通的参数，不如访问url，这个时候就需要自定义一些变量了。  
需要特别说明的是，自定义变量在调用上没有什么特别之处，也是 process.env.变量名  
特殊之处在于  
1、其必须是以 VUE\_APP\_变量名 开头  
2、设置位置为 conf/dev.env.js conf/prod.env.js 这些文件  
下面举一个应用的例子

*  在 conf/dev.env.js 定义 VUE\_APP\_TEST

module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      VUE_APP_TEST: '"自定义测试 dev.env.js"'
    })

*  在 .vue 文件中访问变量

<template>
      <div>
          {
       {diy_message}} 
      </div>
    
    </template>
    <script> export default { data() { return { diy_message:process.env.VUE_APP_TEST }; } } </script>

### 使用 npm set 参数名 ###

使用这个方式设定变量之后，系统会自动给参数增加前缀 npm\_config\_  
比如 npm set port 0000 ,使用 console.log(process.env) 就会看到

npm\_config\_port: ‘0000’,

### 启动命令 ###

Vue 中的环境和变量  
1、Vue-cli 对启动流程流程进行了封装，**不同的命令自动加载不同的配置文件**  
2、配置入口文件位 package.json 这个里面的  
“scripts”: \{  
“dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”,  
“start”: “npm run dev”,  
“build”: “node build/build.js”  
\},

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jlc3RjeHg_size_16_color_FFFFFF_t_70]: /images/20220829/962fa7934ee7400c80ec258a39113441.png