24VueConfig

# VueConfig

# vue配置文件

官网：简单的配置方式 (opens new window)

官网：webpack (opens new window)

官网：环境变量和模式 (opens new window)

# 配置路径别名

// vue.config.js
const path = require("path"); //从webpage外部引入
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@com": path.resolve(__dirname, "src/components/"),
      },
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11

创建文件

// src/components/test.vue
<template>
    <div>
       我是test.vue测试组件
    </div>
</template>

1
2
3
4
5
6

调用

// src/views/home.vue
<template>
  <div>
      <test></test>  <!--调用test.vue文件 -->
  </div>
  
</template>

<script>
import test from "@com/test.vue";  //引入test.vue //这里路径就自定义啦
export default {
    components:{
        test,
    },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 环境变量和模式

vue脚手架默认情况下是三个模式：开发(development)、测试(test)、上线(production)

# 创建文件

开发development

根目录下.env.develompent

# 基本路径
VUE_APP_BASE_URL=http://vt.ossjk.com #环境变量

1
2

测试test

根目录下.env.test

# 基本路径
VUE_APP_BASE_URL=http://vt2.ossjk.com #环境变量

1
2

# 配置

# package.json
"scripts": {
    "dev": "vue-cli-service serve --open", # 默认是开发模式
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service serve --open --mode test" # 测试模式	--open：打开	--mode：模式
  },

1
2
3
4
5
6
7

# 调用

// src/views/home.vue
<template>
  <div>
      <test></test>  <!--调用test.vue文件 -->
  </div>
  
</template>

<script>
import test from "@com/test.vue";  //引入test.vue //这里路径就自定义啦
export default {
    components:{
        test,
    },
    created() {
        console.log(process.env.VUE_APP_BASE_URL); //获取环境变量,在不同环境下变量值不一样
    },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

然后就开始你的表演

npm run dev  # 开发
npm run test # 测试

1
2

编辑

上次更新: 2023/08/06, 00:38:41

← 23插件