vue项目打包上线

config => index.js =>文件中

 

1.删除proxyTable中的代理内容。

proxyTable: {
      '/api':{
        target:'http://192.168.1.111:8081',
        changeOrigin:true,
        pathRewrite:{
          '^/api':'/'
        }
      }
    },

2.修改公共基础路径（页面打开空白）

assetsPublicPath: '/',
改为
assetsPublicPath: './',

3.（在生产环境中不展示源码）

 

productionSourceMap: true,
改为
productionSourceMap: false,

4.css等图片资源找不到

build => utils.js 中

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

5.在根目录的static下创建config.js

 

/** config.js的内容
 * 生产环境
 */
(function () {
    console.log('config.js 请求地址');
    window.SITE_CONFIG = {};
    // api接口请求地址
    window.SITE_CONFIG['baseUrl'] = 'http://localhost:3001';

    //创建的线上baseurl
    // window.SITE_CONFIG['wsUrl'] = 'ws://192.168.1.106:8080/ws/inform/';
  })();

1.首先要将config.js引入到index.html文件中

 

2.修改自己封装axios文件中的中的baseURL

 

 

之后npm run build 然后在vscode下载一个live server插件，右键打包好的dist文件中的index.html 在网页中接口内容和图片资源，css样式能够正常显示出来。