vue项目打包详细流程

第一步: 检测自己的项目是否是vue的脚手架的搭建
vue脚手架---->vue-cli-->webpack(底层)

第二步: 检测自己的项目是否是完整的
运行vue项目: npm run serve 或者 yarn serve

第三步: 打包
在src的同级目录新建 vue.config.js的文件
vue.config.js是配置文件

第四步: 配置内容

const path = require('path')
module.exports = {
    // 基本路径   整个文件夹在哪
    publicPath: './',
    // 输出文件目录   文件夹名
    outputDir: 'dist',
    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。    资源放的目录
    assetsDir: "./static",
    // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径    index的路劲和名字
    indexPath: './index.html',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // runtimeCompiler: true, // 运行时版本是否需要编译
    transpileDependencies: [], // 默认babel-loader忽略node_modules，这里可增加例外的依赖包名
    productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
    css: {
        // 配置高于chainWebpack中关于css loader的配置
        // modules: true, // 是否开启支持‘foo.module.css’样式
        // extract: true, // 是否使用css分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用<style>方式内联至html文件中
        // sourceMap: false, // 是否在构建样式地图，false将提高构建速度
        loaderOptions: { // css预设器配置项
            // less: {
            //   loaderOptions: {
            //   data: `@import "@/assets/less/global.less";`
            //   }
            // }
        }
    },
    parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, './src/assets/less/global.less')]
        }
    },
    pwa: {
        // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    },
    devServer: {
        // 跨域全局配置
        //因为我们的项目全部的路径都要跨域
        proxy: "http://119.23.246.178:80"
    }

}

第五步:
做项目的时候
//尽量将目录写出: ../../components/common/index.vue
// 将 ../../components/common/index.vue 换成 @/components/common/index.vue
执行打包命令:
npm run build 或者 yarn build

````

第六步: dist目录
将dist 发给后台就可以了

vue项目打包详细流程

猜你喜欢