首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue配置vue.config.js

vue配置vue.config.js超详细教程

2024-01-04 15:17:57 作者：郝南过

Vue的配置项'vue.config.js'是用来配置Vue项目的构建配置的,它是一个可选的配置文件,放置在项目的根目录下,这篇文章主要给大家介绍了关于vue配置vue.config.js的相关资料,需要的朋友可以参考下

现在的 vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
  // 关闭eslint校验
  // lintOnSave: false
})

一、在src目录下创建 settings.js用于存放所有规则配置

module.exports = {
  title: 'Example示例',
  transpileDependencies: true
  // 关闭eslint校验
  // lintOnSave: false
}

在vue.config.js中添加以下语句引入settings.js文件

const defaultSettings = require('./src/settings.js')

二、在vue.config.js文件中添加path模块

path 模块，提供了一些工具函数，用于处理文件与目录的路径。path.join()方法用于连接路径，该方法会正确识别当前系统的路径分隔符，如Unix系统是”/“，Windows系统是”\“。__dirname 是node的一个全局变量，即获得当前文件所在目录的完整目录名。

const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir)
  }

三、在vue.config.js中添加端口和网址标题设置

const name = defaultSettings.title // 网址标题
const port = 8099 // 端口配置

四、在vue.config.js中配置module.exports及代理，并在前端解决跨域问题

const path = require('path')
const defaultSettings = require('./src/settings.js')
function resolve(dir) {
    return path.join(__dirname, dir)
  }
  const name = defaultSettings.title // 网址标题
  const port = 8099 // 端口配置
  module.exports = {
    // 配置基地址BASE_URL等于publicpath的值
    // NODE_ENV：Node.js 暴露给执行脚本的系统环境变量。通常用于确定在开发环境还是生产环境
    // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
    publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
    // publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
    outputDir: 'dist', // 输出文件目录
    assetsDir: 'static', // // 放置静态资源
    lintOnSave: process.env.NODE_ENV === 'development',// true/false 设置为开发环境下每次保存代码时都启用 eslint验证
    productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为false以加速生产环境构建
    devServer: {  // 配置开发服务器
      port: port,
    //   overlay: {  // 错误、警告在页面弹出
    //     warnings: false,
    //     errors: true
    //   },
      /* 跨域代理 */
      proxy: {
        // 第一种写法
        '/api': {
          /* 目标代理服务器地址 */
          target: 'http://localhost:8090/',
          /* 允许跨域 */
          changeOrigin: true,
          pathRewrite: {  // 标识替换
            '^/api': '/static/mock'  // 请求数据路径别名,这里是注意将static/mock放入public文件夹
          }
        },
        // 第二种写法
        [process.env.VUE_APP_BASE_API]: {  // 使用环境变量中的值
          target: 'http://127.0.0.1:9000/',
          changeOrigin: true,
          pathRewrite: {
            ['^' + process.env.VUE_APP_BASE_API]: '',
            '^/api': ''
          }
        }
      }
    }
  }

至此前后端解决跨域的方法都有了，可只写一个，也可全写

devServer.proxy中的 pathRewrite说明：

如图，pathRewrite设置了 '^/api': '' ，作用如下:

        使用代理，首先需要有一个标识，告诉程序这个连接要使用代理，不然的话，可能你的html、css、js、矢量图等静态资源都跑去代理。所以我们要通过一个唯一标识，让接口使用代理，静态资源文件使用本地。

        proxy中的 '/api':{······}，就是告诉node，我的接口是要以 /api 开头的才使用代理。所有的接口都要写成 /api/xx/xx ，以 /api 开头，最后代理的接口路径路径就是 http://localhost:8090/api/xx/xxi

        但是例子中真实的后台数据接口里没有 /api，直接就是 http://localhost:8080/xx/xx ，所以就需要配置 pathRewrite，用'^/api': '' 将 /api 去掉，这样既有正确的标识，又能在真实请求接口的时候去掉 /api 。

五、创建上一步中的开发环境配置文件.env.development

可对应配置相应的生产环境配置文件

 ENV = 'development'
VUE_APP_BASE_API = 'http://localhost:8090/api/'

六、修改request.js中的baseURL

import axios from "axios";
const service = axios.create({
    // baseURL: 'http://localhost:8090/api',
    baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    timeout: 3000
})
export default service;

七、启动项目测试

成功运行，并正常请求返回后端数据

总结

到此这篇关于vue配置vue.config.js的文章就介绍到这了,更多相关vue配置vue.config.js内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！