1、通過vue-cli3.0創建的項目想要實現跨域請求操作
2、首先需要穿件配置文件vue.config.js
3、注意此文件創建在項目的根路徑下面,不要創建在src下面
文件配置網上有很多,由於理解不深,便不詳解,
const path = require('path') const debug = process.env.NODE_ENV !== 'production' module.exports = { baseUrl: '/', // 根域上下文目錄 outputDir: 'dist', // 構建輸出目錄 assetsDir: 'assets', // 靜態資源目錄 (js, css, img, fonts) lintOnSave: false, // 是否開啟eslint保存檢測,有效值:ture | false | 'error' runtimeCompiler: true, // 運行時版本是否需要編譯 transpileDependencies: [], // 默認babel-loader忽略mode_modules,這里可增加例外的依賴包名 productionSourceMap: true, // 是否在構建生產包時生成 sourceMap 文件,false將提高構建速度 configureWebpack: config => { // webpack配置,值位對象時會合並配置,為方法時會改寫配置 if (debug) { // 開發環境配置 config.devtool = 'cheap-module-eval-source-map' } else { // 生產環境配置 } Object.assign(config, { // 開發生產共同配置,配置別名 resolve: { alias: { '@': path.resolve(__dirname, './src'), '@c': path.resolve(__dirname, './src/components'), 'vue$': 'vue/dist/vue.esm.js' } } }) }, chainWebpack: config => { // webpack鏈接API,用於生成和修改webapck配置, if (debug) { // 本地開發配置 } else { // 生產開發配置 } }, parallel: require('os').cpus().length > 1, // 構建時開啟多進程處理babel編譯 pluginOptions: { // 第三方插件配置 }, pwa: { // 單頁插件相關配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa }, devServer: { open: true, host: 'localhost', port: 8081, https: false, hotOnly: false, proxy: { // 配置跨域 '/api': {
//要訪問的跨域的api的域名 target: 'http://localhost:5001/api/', ws: true, changOrigin: true, pathRewrite: { '^/api': '' } } }, before: app => { } } }
以上是vue.config.js的配置,小伙伴們也可以去網上找配置文件 ,