vue——项目上线操作

1、过滤掉console调试打印

在build文件夹中的 webpack.prod.conf.js 文件中把 UglifyJsPlugin 类修改为

new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          drop_debugger: true,
          drop_console: true
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

2、在config文件夹中的index.js文件，修改build对象的静态资源路径 assetsPublicPath

build: {
    assetsPublicPath: "./",  //修改此路径

}

3、处理跨域问题

如果在开发环境中，如果在config文件夹中的index.js文件中使用了 proxyTable 代理路由，项目上线需要注释掉

proxyTable: {
      "/backstage": {
        target: "http://192.168.1.142:8080",
        changeOrigin: true, 
        pathRewrite: {
          "^/backstage": "/backstage"
        }
      }
    },

如果不想那么麻烦，可以在 dev.env.js文件中，添加开发环境api属性（注意：api需要两层引号）

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOS:'"http://192.168.1.142:8080"'
})

在prod.env.js文件中添加生产环境api属性

module.exports = {
  NODE_ENV: '"production"',
  API_HOS:'"http://*****:****"'
}

然后在调用api时，使用  process.env.API_HOS 获取当前运行环境的api前缀，使用npm run dev会打开 dev.env.js文件，得到的是开发环境的api接口，使用npm run build打包会调用prod.env.js文件中的api

4、网站图标处理

在build文件夹中的webpack.prod.confi.js文件中的 HtmlWebpackPlugin 类中添加图标路径

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: "index.html",
  favicon: path.resolve('favicon.ico'),  //icon图标就放在根目录
})