vue cli 打包上线

常见的跨域配置(/config/index.js):

proxyTable: {
      '/api': {
        target: 'http://192.168.2.139:8080/Mobile/Max', // 接口的域名
        // secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置，为true的话，请求的header将会设置为匹配目标服务器的规则（Access-Control-Allow-Origin）
        pathRewrite: {
          '^/api': '' //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
          }
        }
    },

在开发调试时，使用axios进行数据交互时没问题。但打包部署到服务器上发现404，跨域报错了。研究发现还需要进行配置一下。

config文件夹还有2个文件dev.env.js和prod.env.js 分别是开发环境和生产环境配置文件，我们需要分别进行修改。

dev.env.js（开发环境）

const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  VUE_APP_BASE_API:'"/api"'

})

prod.env.js(生产环境）

module.exports = {

  NODE_ENV: '"production"',

  VUE_APP_BASE_API:'"http://192.168.xx:xxx"' //项目api地址

}

axios中调用baseRoot

var root = process.env.VUE_APP_BASE_API;
axios({
    method: 'post',
    url: `${root}${url}`,
    data: params
})

Failed to load resource: net::ERR_FILE_NOT_FOUND

在webpack.base.conf.js里

publicPath: process.env.NODE_ENV === 'production'
      ? './' +config.build.assetsPublicPath
      : './' + config.dev.assetsPublicPath
找到 config->index.js里面，如下修改

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',  //修改成‘./'
})

build->utils.js,在里面加入一句publicPath:’../../

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath:'../../',
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}