vue新建项目连接后台代码记录

原创已于 2022-04-12 09:33:14 修改 · 755 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-04-06 08:38:41 首次发布

vue 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何在`project.config.js`中设置不同环境（开发、测试、生产、灰度）的路径、API代理和项目配置，同时讲解了`vue.config.js`中devServer的proxy代理配置。

project.config.js （设置不同环境的路径供引用）

/*
* 本页面参数修改后，记得重新启动项目再查看
* */
const config = {
  PROJECT_PLATFORM: '',
  PROJECT_NAME: '', // 项目名称，浏览器顶部的title
  DEFINE_ENV: process.env.VUE_APP_FLAG,
  // 四个环境，分别是开发、测试、生产、灰度
  DEV: {
    PROJECT_VERSION: '0.1.0', // 项目版本号设置
    SERVICE_DIR_NAME: '/', // 看看我们的网站路径是啥，要不要在网站后面加上比如/web什么的，如果是/web，这里就/web就行了
    BASE_API: '/mental/api', // 你的接口代理，注意，如果地址是域名，如下方的百度，.com后面不能加/mental，而是应该将/mental加在base_api
    PROJECT_TOKEN_NAME: '', // 我们的TOKEN存在localstorage里面，mytoken: asdcascascsadadasddasda，这个mytoken就是我们的PROJECT_TOKEN_NAME
    PROJECT_ROLE_LIST: '', // 每个后台管理系统一般有多个角色，不同的角色就是不同的权限，这里就是角色列表的key，和我们token一样，我们设置了roleList的话，那么localStorage里面就会有一个roleList
    TRUE_API: 'http://baidu.com' // 这个就是我们实际上后端接口地址，就是我们不带/api的地址，我们使用代理的话就写BASE_API和TRUE_API，不用代理的话，就只配置BASE_API
  },
  PROD: {
    PROJECT_VERSION: '',
    SERVICE_DIR_NAME: '/',
    BASE_API: '/mental/api',
    PROJECT_TOKEN_NAME: '',
    PROJECT_ROLE_LIST: '',
    TRUE_API: 'http://127.0.0.1'
  },
  TEST: {
    PROJECT_VERSION: '',
    SERVICE_DIR_NAME: './',
    BASE_API: '',
    PROJECT_TOKEN_NAME: '',
    PROJECT_ROLE_LIST: '',
    TRUE_API: ''
  },
  GRAY: {
    PROJECT_VERSION: '',
    SERVICE_DIR_NAME: './',
    BASE_API: '',
    PROJECT_TOKEN_NAME: '',
    PROJECT_ROLE_LIST: '',
    TRUE_API: ''
  }
}

module.exports = config

vue.config.js (配置devServer的proxy代理就行)

const config = require('./project.config') // 我们的项目统一配置文件
const path = require('path') // 引入nodejs内置的path模块
module.exports = {
    productionSourceMap: false, // 生产环境是否需要sourceMap？这里的生产环境是打包后的项目，测试环境也是生产环境，就是我们的process.env.NODE_ENV
    assetsDir: 'static', // 打包之后，我们的css，js，fonts等统一放到哪个文件夹里面，而不是直接放在根目录下，可以直接打包和注释后再打包看看dist文件内的区别
    devServer: {
        disableHostCheck: true, // 如果你希望别人能访问你本地启动的项目，那么你一定要设置这个为true，用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查
        proxy: {
            [config[config.DEFINE_ENV].BASE_API]: {
                target: config[config.DEFINE_ENV].TRUE_API,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + config[config.DEFINE_ENV].BASE_API]: config[config.DEFINE_ENV].BASE_API
                }
            }
        }
    },
    chainWebpack: webpackConfig => {
        // 配置快捷路径
        webpackConfig.resolve.alias
            .set('@', path.join(__dirname, 'src')) // 我们import或者require的时候，用@起头是代替src，那么我们可以自定义，用root代替这个项目，这样我们就可以直接拿到src上一级的东西了
            .set('root', path.join(__dirname, ''))
        // 阻止一开始把js全下载完，提升首屏性能
        webpackConfig.plugins.delete('prefetch')
        // 单页面时配置这个配置页面标题，多页面的时候注释这个
        webpackConfig
            .plugin('html')
            .tap(args => {
                args[0].title = config.PROJECT_NAME
                return args
            })

        // 配置svg-loader，这个是让我们项目可以使用svg的插件
        // const svgRule = webpackConfig.module.rule('svg')
        // svgRule.uses.clear()
        // svgRule
        //     .use('svg-sprite-loader')
        //     .loader('svg-sprite-loader')
        //     .options({
        //         symbolId: 'icon-[name]'
        //     })
        //     .end()
        // 配置图片压缩工具，这个和lrz不是同一个东西，这个是我们打包的时候把一个600kb的图片通过无损的技术压缩成200kb
        // const imgRule = webpackConfig.module.rule('images')
        // imgRule.uses.clear()
        // imgRule
        //     // base64图片
        //     .test(/\.(png|jpe?g|gif)(\?.*)?$/)
        //     .use('url-loader')
        //     .loader('url-loader')
        //     .options({
        //         limit: 500,
        //         outputPath: 'images'
        //     })
        //     .end()
        //     // 自动无损压缩图片，不需要写任何代码了
        //     .use('image-webpack-loader')
        //     .loader('image-webpack-loader')
        //     .end()
    },
    configureWebpack: setting => {
        if (process.env.NODE_ENV === 'production') {
            setting.mode = 'production'
        }
    },
    css: {
        extract: true // 压缩css并将打包后index.html中不再有style标签，而是link标签
    },
    // 这个就是我们的网站后面跟着的路径，比如正常网站是：https://www.baidu.com
    // 这个时候，我们的网站都是在https://www.baidu.com后面加一个/web
    // 那么我们配置完之后，就会自动变成https://www.baidu.com/web
    // 这个配置我们只管配，但是跳转出问题的话，nginx要处理，nginx把文件夹映射射出即可
    // publicPath: config[config.DEFINE_ENV].SERVICE_DIR_NAME
}

package.js （运行的代码引用.dev文件）

{
  "name": "name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
// --mode dev 是需人工添加的，使用.dev里面的后端路径
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode pord",
    "lint": "vue-cli-service lint"
  },
*********(剩余依赖省略)
}