一步步创建vue-element-admin框架实现003-添加配置文件

一步步创建vue-element-admin框架实现003-添加配置文件

使用说明：

一步步创建vue-element-admin框架是基于vue-element-admin和vue-admin-template基础版的代码来实现的，文章会经常说直接拷贝项目的文件

配置文件：vue.config.js，cli3的配置文件

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  devServer: {
    port: 9210
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

配置文件：jsconfig.json，对所有js代码做出个性化支持

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

添加配置文件之后，现在可以@来代替src路径使用，比如路由配置的

export const constantRoutes = [
  {
    path: '/helloWord',
    component: () => import('@/components/HelloWord'),
    hidden: true
  },
  {
    path: '/test',
    component: () => import('../components/Test'),
    hidden: true
  }
]

配置文件：.env.development或.env.production，全局环境变量配置文件

.env.development

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'

# port
PORT = 9101

.env.production

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '/prod-api'

# port
PORT = 9201

使用配置内容：process.env.xxx（process.env.PORT）

设置端口，在vue.config.js里

module.exports = {
  devServer: {
    port: process.env.PORT || 8080
  },
}

在request.js设置

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // 请求超时设置
})

使用那个配置文件信息，在package.json启动命令设置:–mode development

"scripts": {
  "serve:dev": "vue-cli-service serve --mode development",
  "serve:prod": "vue-cli-service serve --mode production",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},