Vue项目的基础搭建和解决Vue中的跨域问题

最新推荐文章于 2024-04-06 09:00:21 发布

捡黄金的少年

最新推荐文章于 2024-04-06 09:00:21 发布

阅读量727

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43288858/article/details/106062682

版权

项目环境搭建

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

vue create jhj-msm

在这里插入图片描述
初始化的项目是这样的

在项目下添加 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 文件，加快打包速度
}

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

npm i -S axios

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

npm i -S pubsub-js

整合 ElementUI

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

npm i -S element-ui

在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");

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

在这里插入图片描述

Axios 封装和跨域问题

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

在 src 目录下创建 utils 目录及 utils 下面创建 request.js 文件
内容如下：
参考：
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对象

在这里插入图片描述
建立一个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
    }
}

在这里插入图片描述
当请求的/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': '',
                }
            }
        }

在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>

在这里插入图片描述
配置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 文件，加快打包速度
}

在这里插入图片描述
将 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'

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

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

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

console.log(process.env.VUE_APP_BASE_API)

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 文件，加快打包速度 
}

在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 对象

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

捡黄金的少年

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue项目的基础搭建和解决Vue中的跨域问题

项目环境搭建和上次搭建的自定义项目是一样的,这里就不重复写了vue create jhj-msm初始化的项目是这样的在项目下添加 vue.config.js文件并配置端口号等其他参数。module.exports = { devServer: { port: 8888, // 端口号，如果端口号被占用，会自动提升1 host: "localhost", //主机名， 127.0.0.1，真机 0.0.0.0 https: false,
复制链接

扫一扫