VUE打包方法

VUE打包方法

方法一： 自己一步一步的搭建项目（ps：不是使用命令vue create name 下载的项目）
1，初始化项目

npm init -y （创建一个包含package.json）

2，局部安装

npm install webpack --save-dev
npm install webpack-cli --save-dev

3，编写配置文件（webpack.config.js）

const path = require("path");
                        module.exports = {
                            entry:path.join(_dirname,'./src/app.js'),
                               output:{
                                  path:path.join(_dirname,'./dist'),
                                  filename:'app.bulid.js'
                              }
                         };

4，修改package.json

使用快捷方式执行打包操作
“build”: “webpack”

5，打包

npm run build

补充：6，打包html文件
1>，下载loader

npm install html-webpack-plugin --save-dev

2>，修改配置

   var HtmlWebpackPlugin = require('html-webpack-plugin');    //打包html的插件
                //插件
                plugins[
                  new HtmlWebpackPlugin({
                    filename:'index.html',
                    template:'./src/index.html'
                  })
                ]

方法二： 创建一个基于vue + webpack的项目模板
1，安装

cnpm install @vue/cli-init -g

2，初始化项目

vue init webpack app01

3，安装依赖
进入到项目根文件路径下：

cnpm install

4，运行项目

npm run dev

5，修改项目
6，打包

• 打包运行之前，需要修改配置文件：

在路径config/index.js: （修改该文件的内容）
assetsPublicPath:’/’<-改为->’./’

• 再运行命令：

npm run build

            最后得到dist文件:打开index.html就可以得到自己做的项目的首页

PS： 使用半成品项目打包——vue-element-admin/template
1，获取项目

1>，下载zai 官网：https://panjiachen.github.io/vue-element-admin-site
解压后使用cnpm或者npm下载依赖。
2>，使用git clone 克隆项目
使用npm下载依赖，切记不可以使用cnpm下载依赖否则会出现各种bug。

2，运行项目

num run dev

3，修改项目
4，打包项目

—修改静态文件路径
vue.config.js:
publicPath:’/’<-修改->’./’
— 再执行命令：
npm run build

最后得到dist文件:打开index.html就可以得到自己做的项目的首页