VUE打包方法
VUE打包方法方法一: 自己一步一步的搭建项目(ps:不是使用命令vue create name 下载的项目)1,初始化项目npm init -y(创建一个包含package.json)2,局部安装npm install webpack --save-devnpm install webpack-cli --save-dev3,编写配置文件(webpack.config.js)const path
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就可以得到自己做的项目的首页
更多推荐
所有评论(0)