vue-cli 3.0以上打包部署过程

2021-05-27 14:33:06 阅读：183 来源： 互联网

找到package.json
在这里插入图片描述
在对应的vue的项目目录下面新建vue.config.js
写入下面的配置

module.exports = {
	publicPath: '/h5/dist/',  //代表部署的域名访问的目录   
	outputDir: 'dist',//打包后在当前目录下生成打包后的dist文件,把dist文件放置到对应的域名/h5/下面即可
	assetsDir: 'static',
	lintOnSave: false,
	productionSourceMap: false //去除打包后js的map文件
}
 cd mytest
 执行：npm run build 进行打包

在这里插入图片描述然后把dist文件放到对应的项目服务器的对应目录下面，下面以域名+/h5/dist/为例

https://test.okall.com.cn/h5/dist/#/ 既可以运行

如何解决刷新页面404的问题，在路由下面配置路由的模式为hash
const router = new VueRouter({
routes,
mode: “hash”,
base: process.env.BASE_URL

})
再次打包部署既可以解决
在路由下面配置路由的模式为history时
const router = new VueRouter({
routes,
mode: “history”,
base: process.env.BASE_URL

})
再次打包部署,此时需要后台服务器配置nginx

#H5/h6
     location /h5/h6/ {
        try_files $uri $uri/ @h6;
        alias /u02/h5/h6/;
        autoindex on;
        allow all;
    }
    location @h6 {
        rewrite ^.*$ /h5/h6/index.html last;
    }

标签：下面,vue,dist,cli,h6,h5,路由,3.0,打包
来源： https://blog.csdn.net/weixin_43878003/article/details/117327484

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-cli 3.0以上打包部署过程