"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"release": "vue-cli-service build --mode release",
"lint": "vue-cli-service lint"
}

4.打包命令

• 打包測試版本：npm run build
• 打包正式版本：npm run release
• 打包好的文件分別放在dist/release中

打包文件優化

1.安裝插件

• uglifyjs-webpack-plugin //去除console
• compression-webpack-plugin //gzip壓縮

npm install --save -dev uglifyjs-webpack-plugin compression-webpack-plugin

vue.config.js配置

//去console插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//gzip壓縮插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports={
 // 基本路徑 
 baseUrl: '/', 
 // 輸出文件目錄 
 outputDir: 'dist', 
 // 用於嵌套生成的靜態資產（js，css，img，fonts）的目錄。 
 assetsDir: '', 
 // 以多頁模式構建應用程序。 
 pages: undefined, 
 // eslint-loader 是否在保存的時候檢查 
 lintOnSave: true, 
 // 是否使用包含運行時編譯器的Vue核心的構建。
 runtimeCompiler: false, 
 // 默認情況下babel-loader忽略其中的所有文件node_modules。
 transpileDependencies: [],
 // 生產環境sourceMap 
 productionSourceMap: true, 
 // webpack配置 
 configureWebpack: () => {},
 chainWebpack: () => {}, 
 // css相關配置
 css: { 
 // 啟用 CSS modules 
 modules: false, 
 // 是否使用css分離插件 
 extract: true, 
 // 開啟 CSS source maps? 
 sourceMap: false, 
 // css預設器配置項 
 loaderOptions: {}, 
 }
 // webpack-dev-server 相關配置
 devServer: {
 host: '0.0.0.0', 
 port: 8080, 
 https: false, 
 hotOnly: false,
 proxy: null, // 設置代理 
 before: app => {} 
 },
 parallel: require('os').cpus().length > 1,
 // PWA 插件相關配置
 pwa: {},
 // 第三方插件配置
 pluginOptions: {
 // ...
 }
}

閱讀更多 幻城小螞蟻 的文章

關鍵字: 根目錄 技術 配置