一.修改config-->index.js文件, 把build:{}  下的assetsPublicPath: '/',改成assetsPublicPath: './',---------解决首页加载空白问题


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

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

二.如果需要在tomcat-->webapps目录下创建新的文件夹,需要把router-->index.js文件中添加base:'/文件夹名/'

Vue.use(Router)

/* 初始路由 */
const router = new Router({
  base: '/myczsrgl/',
  routes: [  
    {
        path: '/login',
        name: '登录',
        component: Login
    }
  ]
})

三.一般情况下会出现加载静态资源失败的情况,在build-->utils.js文件中添加一行代码---publicPath:'../../',

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',   //publicPath为打包后app.css至index.html的相对路径
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

四.如果在开发环境下添加了跨域接口调用或者代理的情况,则在生产环境也需要做相应的修改

config--->dev.env.js   添加开发环境中的:  API_ROOT: '"/api"' 

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"/api"'     //添加API_ROOT
})

config--->prod.env.js   添加生产环境中的:  API_ROOT: '"/api"' 

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"http://192.168.8.108:8088/MLFinanceManage"'
}

在axios调用创建时,添加代码  baseURL: process.env.API_ROOT, 

//创建axios实例
var instance = axios.create({
  baseURL: process.env.API_ROOT,    //接口调用
  timeout: 120000 ,//请求超过60秒即超时返回错误
  // headers: { 'Content-Type': 'application/json;charset=UTF-8' }
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }  //post提交数据
})
  //用户登录
  userLogin(data){
      //就不需要像开发环境中的  'api/login/login'   这样调用了
      return instance.post('/login/login', qs.stringify(data))    
  },

五.最后就是npm run build打包了,会生成一个dist目录,把这个文件夹拷贝到tomcat-->webapps目录下,并重命名为第二步中的(base:'/文件夹名/' )   文件名,启动服务就可以访问了(类似http://192.168.8.108:8088/myczsrgl)

Logo

前往低代码交流专区

更多推荐