devServe的配置使用

1.在vue.config中配置，package.json中使用vue-cli-service server 启动

2.webpack.config中配置，packge.json通过webpack启动serve

 

第一种方式

//本地使用devServer避免跨域

//服务器在反向代理服务器中配置代理避免跨域

vue.config.js

module.exports = {

  devServer: {

    proxy: {

      '/api': { //此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致

        target: process.env.VUE_APP_API_BASE_URL, //配置要替换的后台接口地址

        changeOrigin: true,//配置允许改变origin

        ws:true,//proxy websockets

        pathRewrite: {

          '^/api': '/api',

          //pathRewrite: {'^/api': '/'}    重写之后url为 http://localhost：8080/xxxx

          //pathRewrite: {'^/api': '/api'} 重写之后url为 http://localhost：8080/api/xxxx

        }

      }

    }

  },

}

 

package.json

"scripts": {

  "serve": "vue-cli-service serve",

  "build": "vue-cli-service build",

  "lint": "vue-cli-service lint",

  "predeploy": "yarn build",

  "deploy": "gh-pages -d dist -b pages -r https://gitee.com/iczer/vue-antd-admin.git",

  "docs:dev": "vuepress dev docs",

  "docs:build": "vuepress build docs",

  "docs:deploy": "vuepress build docs && gh-pages -d docs/.vuepress/dist -b master -r https://gitee.com/iczer/vue-antd-admin-docs.git"

 },

 

第二种使用方式

webpack.dev.config.js

module.exports = merge(webpackBaseConfig, {

    devtool: '#source-map',

    output: {

        publicPath: '/dist/',

        filename: '[name].js',

        chunkFilename: '[name].chunk.js'

    },

    devServer: {

        historyApiFallback: true,

        hot: true,

        inline: true,

        stats: { colors: true },

        proxy: {

            '/list': {

              target: 'http://localhost:6601',

              pathRewrite: {'^/list': ''},

              changeOrigin: true

            }

        }

    },

}

package.json

  "scripts": {

    "start": "npm run dev",

    "init": "webpack --progress --config build/webpack.dev.config.js",

    "dev": "webpack-dev-server --content-base ./ --open --inline --hot --compress --config build/webpack.dev.config.js",

    "build": "webpack --progress --hide-modules --config build/webpack.prod.config.js",

    "lint": "eslint --fix --ext .js,.vue src",

    "test": "npm run lint"

  },