1、打包前的配置工作
1.1、使用vue自带的打包工具(vue-cil)
配置vue.config.js
文件
打开
vue.config.js
文件修改参数,如果项目的目录中没有vue.config.js
文件,那么需要自建一个配置文件;在根目录src
下创建文件即可。需注意文件名称必须是vue.config.js
,然后在文件中写入代码。
// 打包配置文件
module.exports = {
assetsDir: 'static',
parallel: false,
// 默认
// publicPath: '/',
// 打包时使用
publicPath: './',
};
☺☺☺☺☺☺☺
配置router/index.js
文件
const router = new VueRouter({
// 默认
// mode: 'hash',
// 打包时使用
mode: 'history',
routes
});
以上的配置不能混淆,混淆会报错。默认配置针对的是本地启动项目,如果本地启动使用了打包时的配置直接报错。如果打包时使用了默认配置,那么打包的代码也不能正常使用,可能报错或者页面空白,页面空白但不报错的情况也会发生。总之配置需要一一对应,只要有一个地方不对应就会出问题。
1.2、使用webpack工具打包
需要在
config
中的index.js
文件里面把assetsPublicPath: '/'
改为assetsPublicPath: './'
。文章来源:https://www.toymoban.com/news/detail-769610.html
2、打包
配置完成之后,打开控制台,输入打包命令
npm run build
开始打包。如果没有报错的前提下会生成一个名为dist
的文件夹,反过来说就是如果生成dist
文件夹,说明打包没问题。dist
文件夹就是我们需要的包,随后放到服务器部署上线即可。文章来源地址https://www.toymoban.com/news/detail-769610.html
到了这里,关于vue项目的打包方式、生成dist文件夹、publicPath、hash、history、assetsPublicPath的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!