vue-打包遇到的問題

vue-打包

打包后用iframe引入的html文件亂碼

原因：暫不知曉
解決：用live server打開就不會亂碼

生產環境移除所有的console命令

三種解決方法

1

發現vue-cli3.0在打包過程中就使用了terser-webpack-plugin插件進行優化，具體配置可以node_modules/@vue/cli-service/lib/config/prod.js中看到。
if (process.env.VUE_CLI_TEST) {
  webpackConfig.optimization.minimize(false)
} else {
  const TerserPlugin = require('terser-webpack-plugin')
  const terserOptions = require('./terserOptions')
  webpackConfig.optimization.minimizer([
    new TerserPlugin(terserOptions(options))
  ])
}
這里使用了環境變量進行控制，只有打生產包的時候才會調用這個插件進行打包優化。

terser-webpack-plugin的具體配置在同一個文件夾下terserOptions.js中，只要在這個文件中compress對象加入以下代碼：
warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log'],

2

安裝插件
npm install terser-webpack-plugin --save-dev
module.export = {
  configureWebpack: (config)=>{
    if(process.env.NODE_ENV === 'production'){
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
  }
}

3

npm install babel-plugin-transform-remove-console --save-dev
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
let plugins = [
  [
    "import",
    {
      libraryName: "ant-design-vue",
      libraryDirectory: "es",
      style: true
    }
  ]
];
if (IS_PROD) {
  plugins.push("transform-remove-console");
}
 
module.exports = {
  presets: ["@vue/app"],
  plugins
};

自定義打包入口

vuecli3打包后一片空白

原因：引用路徑錯誤 原因是打包的過程中直接將/直接作為了直接路徑

解決方法：新建vue.config.js文件，添加配置項：publicPath: ‘./’

vuecli3打包后點擊路由無法訪問您的文件

原因：因為為history的時候需要后台配置若找不到資源定位到依賴頁面
解決方案：將路由配置文件中的mode:'history’注釋掉，或者改為hash