devbox
思考机器5
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue项目的基础搭建和解决Vue中的跨域问题_packjson"vue":{ "devserver":{ "port":8888, "open":

作者：思考机器5 | 2024-01-31 08:22:49

赞

踩

packjson"vue":{ "devserver":{ "port":8888, "open":true }为什么在v5.7.8不生效

项目环境搭建

和上次搭建的自定义项目是一样的,这里就不重复写了

vue create jhj-msm

  • 1

在这里插入图片描述
初始化的项目是这样的
http://localhost:8888/#/
在项目下添加 vue.config.js文件并配置端口号等其他参数。

module.exports = {
    devServer: {
        port: 8888, // 端口号，如果端口号被占用，会自动提升1
        host: "localhost", //主机名， 127.0.0.1， 真机 0.0.0.0
        https: false, //协议
        open: true, //启动服务时自动打开浏览器访问
   },
    lintOnSave: false, // 关闭格式检查
    productionSourceMap: false, // 打包时不会生成 .map 文件，加快打包速度
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述
安装axios

npm i -S axios

  • 1

安装 pubsub-js ，实现非父子组件间通信

npm i -S pubsub-js

  • 1

整合 ElementUI

ElementUI 简介
Element 是饿了么平台推出的一套基于 Vue.js 开发的后台页面组件库。
官网：https://element.eleme.cn/
在这里插入图片描述
安装element ， element-ui 模块通过本地安装为生产依赖。在 mxg-ssm 目录下的命令行窗口，输入以下命令：

npm i -S element-ui

  • 1

在main.js中导入elementUI

import Vue from "vue";
import ElementUI from 'element-ui'; // 组件库
import 'element-ui/lib/theme-chalk/index.css'; // 样式
import App from "./App.vue";
import router from "./router";
// 使用 ElementUI
Vue.use(ElementUI);
// 消息提示的环境配置，是否为生产环境：
// false 开发环境：Vue会提供很多警告来方便调试代码。
// true 生产环境：警告却没有用，反而会增加应用的体积
Vue.config.productionTip = process.env.NODE_ENV === 'production';
new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

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

当然官网也有说明的
在这里插入图片描述
在 VS Code 中安装 Element UI Snippets 插件，有 element 语法提示

在这里插入图片描述

Axios 封装和跨域问题

封装 Axios 对象
因为项目中很多组件中要通过 Axios 发送异步请求，所以封装一个 Axios 对象。自已封装的 Axios 在后续可以使用
axios 中提供的拦截器。

  1. 在 src 目录下创建 utils 目录及 utils 下面创建 request.js 文件
  2. 内容如下：
    参考：
    https://github.com/axios/axios#creating-an-instance
    https://github.com/axios/axios#request-config

复制并启动一个端口号8081的项目

复制并启动一个端口号8081的项目，里面创建一个db.json文件来模拟一个接口
在这里插入图片描述
请求路径http://localhost:8081/db.json
在这里插入图片描述

建立一个utils文件夹，下面创建request.js

在这里插入图片描述

import axios from 'axios'
// axios.get('/db.json').then(response=>{
//    const data= response.data
//    console.log(data)
// })
// 定义一个request请求
const request=axios.create({
    baseURL:'/',
    // baseURL:'/dev-api',
    timeout:5000
})



// request.get('/db.json').then(response=>{
//     const data= response.data
//    console.log(data)
// })
// 定义拦截器，对请求进行拦截
request.interceptors.request.use(config=>{

    return config
},error=>{

    return Promise.project(error);
})
//对响应进行拦截
request.interceptors.response.use(response=>{

    return response
},error=>{

}
)

export default request//导出自定义创建的axios对象

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

在这里插入图片描述
建立一个api文件夹，下面建立一个test.js文件，来获取db.json文件

import request from '@/utils/request'
// request.get('/db.json').then(response=>{
//     const data= response.data
//    console.log(data)
// })
// 测试二，以对象的方式进行指定请求方式
request({
    method: 'get',
    url: '/db.json',
}).then(response => {
    console.log('aget2' + response.data)
})
// 返回的对象导出
request({
    method: 'get',
    url: '/db.json',
}).then(response => {

})
export default {
    getlist() {
        const yuu = request({
            method: 'get',
            url: '/dev-api/db.json',
        })
        return yuu
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

在这里插入图片描述
当请求的/dev-api/db.json 的时候，系统会自动寻找vue.config下面的配置proxy下面开发环境中的代理配置，并请求数据，
由上图可见请求路径/dev-api/db.json ，系统找到/dev-api下面配置，并将/dev-api替换为空，所以请求的db.json就是http://localhost:8081/db.json ,这样就获取到数据了


        proxy: {//开发环境代理配置
            '/dev-api': {
                // 目标服务器的地址，代理访问 http://localhost:8001
                target: 'http://localhost:8081',
                changeOrigin: true,//开启代理服务器
                pathRewrite: {
                    // /dev-api/db.json最终会发送http://localhost:8001/db.json
                    // 将请求的地址前缀/dev-api 替换为空的
                    '^/dev-api': '',
                }
            }
        }
  

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

在HelloWord.vue中展示test.js通过axios请求到的后端的数据

helloword.vue的代码如下 <h1>{{ list }}</h1>

<template>
  <div class="hello">
    <h1>{{ list }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,
      <br />check out the
      <a
        href="https://cli.vuejs.org"
        target="_blank"
        rel="noopener"
      >vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
          target="_blank"
          rel="noopener"
        >babel</a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
          target="_blank"
          rel="noopener"
        >eslint</a>
      </li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
      </li>
      <li>
        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
      </li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li>
        <a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
      </li>
      <li>
        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-devtools#vue-devtools"
          target="_blank"
          rel="noopener"
        >vue-devtools</a>
      </li>
      <li>
        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
      </li>
    </ul>
  </div>
</template>

<script>
// 引入api的test
import testApi from "@/api/test";
export default {

data() {
  return {
    list:[]
  }
},

  created() {
    this.fetchData();
  },

  methods: {
    fetchData() {
      testApi.getlist().then(respnse => {

         console.log('aget333' + respnse.data)
         this.list=respnse.data
      });
    }
  },
  
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122

在这里插入图片描述
配置vue.config.js,解决跨域问题

module.exports = {
    devServer: {
        port: 8888, // 端口号，如果端口号被占用，会自动提升1
        host: "localhost", //主机名， 127.0.0.1， 真机 0.0.0.0
        https: false, //协议
        open: true, //启动服务时自动打开浏览器访问
        proxy: {//开发环境代理配置
            '/dev-api': {
                // 目标服务器的地址，代理访问 http://localhost:8001
                target: 'http://localhost:8081',
                changeOrigin: true,//开启代理服务器
                pathRewrite: {
                    // /dev-api/db.json最终会发送http://localhost:8001/db.json
                    // 将请求的地址前缀/dev-api 替换为空的
                    '^/dev-api': '',
                }
            }

        }
    },
    lintOnSave: false, // 关闭格式检查
    productionSourceMap: false, // 打包时不会生成 .map 文件，加快打包速度
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

在这里插入图片描述
将 mxg-mms\db.json 拷贝到 axios-demo\public\ 目录下
axios-demo 工程就是 复制了mxg-mms 重命名了
2. axios-demo\vue-config.js 更改 端口号, 将端口号更改为 8081
3. 启动 axios-demo ,

配置不同环境 常量值

参考：https://cli.vuejs.org/zh/guide/mode-and-env.html
开发环境请求 Mock.js 获取数据，开发环境请求后台接口获取数据，不同环境请求的URL不一样，所以要为不同环
境匹配不同请求接口URL，通过路径前缀进行匹配。当前只针对开发环境，后面会生产部署再讲生产如何实现。
根目录下创建 .env.development 和 .env.production 文件，
.env.development 文件配置（注意开发和生产环境配置不要搞反了）

# 使用 VUE_APP_ 开头的变量会被 webpack 自动加载
# 定义请求的基础URL, 方便跨域请求时使用
VUE_APP_BASE_API = '/dev-api'
# 接口服务地址， 以你自已的为主
VUE_APP_SERVICE_URL = 'http://localhost:8001'

  • 1
  • 2
  • 3
  • 4
  • 5

.env.production 文件配置（注意开发和生产环境配置不要搞反了）

# 使用 VUE_APP_ 开头的变量会被 webpack 自动加载
# 定义请求的基础URL, 方便跨域请求时使用
VUE_APP_BASE_API = '/pro-api'

  • 1
  • 2
  • 3

测试：在 main.js 中添加以下代码，看下浏览器控制台是否会输出
在项目任意模块文件中，都可以使用 process.env.VUE_APP_BASE_API 获取值

console.log(process.env.VUE_APP_BASE_API)

  • 1

vue.config.js文件的配置如下

module.exports = {
    devServer: {
        port: 8888, // 端口号，如果端口号被占用，会自动提升1
        host: "localhost", //主机名， 127.0.0.1，  真机 0.0.0.0
        https: false, //协议
        open: true, //启动服务时自动打开浏览器访问
        proxy: { // 开发环境代理配置
            // '/dev-api': {
            [process.env.VUE_APP_BASE_API] :{
                // 目标服务器地址，代理访问 http://localhost:8001
                target: process.env.VUE_APP_SERVICE_URL,
                changeOrigin: true, // 开启代理服务器，
                pathRewrite: {
                    // /dev-api/db.json 最终会发送 http://localhost:8001/db.json
                    // 将 请求地址前缀 /dev-api 替换为 空的，
                    // '^/dev-api': '',
                    [ '^' + process.env.VUE_APP_BASE_API]: ''
                }
            }
        }
    },
    lintOnSave: false, // 关闭格式检查
    productionSourceMap: false, // 打包时不会生成 .map 文件，加快打包速度 
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

在utils文件夹下面的request.js下面配置原始的URL baseURL: '/dev-api', 改成baseURL: process.env.VUE_APP_BASE_API, 这样就可以直接修改.env.production 中的配置，而不用去vue.config.js中配置了

import axios from 'axios'

const request = axios.create({
    // /db.json >  通过 axios > /dev-api/db.json >  通过 代理转发（vue.config.js）》 http://localhost:8001/db.json
    // baseURL: '/dev-api', 
    baseURL: process.env.VUE_APP_BASE_API, 
    // baseURL: '/',
    timeout: 5000 // 请求超时，5000毫秒
})

// 请求拦截器
request.interceptors.request.use(config => {
    // 请求拦截
    return config
}, error => {
    // 出现异常
    return Promise.reject(error);
})
// 响应拦截器
request.interceptors.response.use(response =>{
    // response.data
    return response
}, error => {
    return Promise.reject(error);
})

//  http://localhost:8888/dev-api/db.json 404
// request.get('/db.json').then(response => {
//     console.log(response.data)
// })

export default request // 导出自定义创建 axios 对象

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

这样就可以统一修改.env.development的URL和其他配置，简化了配置

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/49983
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号