精华内容
下载资源
问答
  • Vue项目打包部署(hash模式)
    千次阅读
    2021-10-19 08:52:02

    前提准备

    我们需要准备一个vue项目(vue-cli3,vue-cli4)、一个nginx服务器(可有可无)

    本教程讲解的是vue-router中hash模式的部署【完全适用vue-cli3、4】,vue-cli2需要进行略微改动

    部署流程

    • 配置vue.config.js中的publicPath
    • 配置vue-router的模式为hashs【非常关键】
    • 使用npm run build生成dist文件夹
    • 配置nginx代理
    • 配置nginx路由

    vue.config.js

    如果你的项目中没有这个文件,直接在项目根目录创建它就行

    1.配置publicPath

    module.exports = {
        publicPath:  "./",
        outputDir:'dist',
    }
    

    vue-router

    1.配置路由模式和基础路由

    export default new Router({
        // history模式,需要和服务端配合才能在生产环境下正常使用
        mode: 'hash',
        routes:[]
    })
    

    npm run build

    我们在vue项目根目录下运行npm run build就可以进行项目的打包了。打包后会生成dist文件夹,然后直接运行这个index.html就行(vscode要在liveserver打开它)

    如果你只是想在本地看到效果的话,那就不用往下看。因为下面我分享的是nginx服务器上线的方法

    nginx

    1.配置nginx代理

    有些时候我们需要请求一些跨域服务,在开发时,我们可以配置devServer的proxy实现跨域访问。

    但是在npm run build后,我们会发现代理无效。这是因为生产环境下的文件已经脱离devServer了,所以自然代理就没有用了,所以一般生产环境代理我们使用nginx去做

    location /api/{
        proxy_pass  http://121.36.94.221:6600/;
        index  index.html index.htm;
    }
    
    location /info/{
        proxy_pass  http://ckk.xiaoandcai.cn/;
        index  index.html index.htm;
    }
    

    假设我们的nginx服务器的端口号是8080,那么我们请求localhost:8080/api就相当于请求121.36.94.221:6600

    这种写法和devserver配置代理的方法类似

    2.配置nginx路由

    location / {
        root   D:/nginx/nginx-1.20.0/html/dist;
        index  index.html index.htm;
        autoindex on;       #开启nginx目录浏览功能
        autoindex_exact_size off;   #文件大小从KB开始显示
        charset utf-8;          #显示中文
    }
    

    现在启动nginx服务器输入localhost:8080/就可以访问我们的vue项目了

    更多相关内容
  • vue 打包方式

    千次阅读 2022-01-01 12:33:07
    今天分享的是vue项目中的打包方式: 一、使用vue-cli脚手架生成的项目 二、使用webpack 那么就让我们步入正题 第一种: vue create app生成项目的目录: 我们可以看到使用脚手架生成的项目是没有config文...

    我是一个苦b的程序员,今晚加班到快通宵了,困得快睁不开眼了,女上司很关心,问我要不要吃宵夜。我没好气地说,宵夜就算了,能让我睡一觉就行了。女上司红着脸说了句讨厌啊,然后坐在我身边不动,好像距离我很近,搞得我很紧张,难道她发现我的程序出了bug?

            今天分享的是vue项目中的打包方式:

            一、使用vue-cli脚手架生成的项目

            二、使用webpack

            那么就让我们步入正题

            第一种:

                    vue create app生成项目的目录:

            我们可以看到使用脚手架生成的项目是没有config文件夹的,那么就需要我们在根目录下创建一个vue.config.js的文件 而且文件的名称一定要是vue.config.js

             创建好文件之后在文件里添加一下代码:

            第二种:

                    使用webpack

                    创建好项目之后我们可以看到会有一个config的文件夹

                    直接修改assetsPublicPath字段

             配置完后之后就开始我们的打包环节

            打开项目根目录的package.json的文件夹 script脚本的build字段

            现在执行npm run build 会把src下的所有代码一块打包

            那我想指定目录打包怎么办?

                    这边简单介绍几个打包的配置项

            --target lib 指定打包目录

            --name 打包后的文件名字

            --dest 打包后的文件夹名称 

             接下来执行npm run build 生成我们打包后的文件,然后部署上线 但是需要注意的一点是只要我们的项目做了修改,都需要重新执行npm run build重新打包 

            深夜我坐在电脑前一边喝水一边苦苦检查bug。一番研墨拟纸,并点上上好檀香。定神片刻,泼墨挥毫,郑重地写下一行字:hello world!

    展开全文
  • 主要介绍了Springboot项目与vue项目整合打包的实现方式,本文通过两种方式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 新建项目什么都不动,路由模式:history, 直接npm run build打包 打包之后,直接打开dist文件里面的ndex.html可以看到页面是空白的,控制台是这样的。 再看看网页源码, 对比dist文件夹结构可以看到资源路径的...

    路由模式 history

    新建项目什么都不动,路由模式:history, 直接npm run build打包

    打包之后,直接打开dist文件里面的ndex.html可以看到页面是空白的,控制台是这样的。

    在这里插入图片描述


    再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的,应该用'./'而不是'/'

    在这里插入图片描述
    在这里插入图片描述


    那怎么修改打包之后的路径呢?查看vue-cli官网配置参考中的publicPath

    在这里插入图片描述

    我们只需要在和package.json同级的地方新增一个vue.config.js文件,将路径修改为相对路径'./'

    // vue.config.js
    module.exports = {
        publicPath: './',
    }
    

    再次打包, 页面不是空白了,但还有很多东西没显示完,正常的页面是这个样子

    在这里插入图片描述

    打包之后是这样子

    在这里插入图片描述

    点击About进行路由跳转是这样子

    在这里插入图片描述

    路由模式 hash

    改一下路由模式,找到router/index.js文件, 将history修改为hash, 再进行打包

    // router/index.js
    const router = new VueRouter({
      mode: 'hash',
      base: process.env.BASE_URL,
      routes
    })
    

    页面显示和路由跳转就都可以了
    在这里插入图片描述在这里插入图片描述

    总结

    1. 修改路径

    // vue.config.js
    module.exports = {
        publicPath: './',
    }
    

    2. 更改路由模式

    // router/index.js
    const router = new VueRouter({
      mode: 'hash',
      base: process.env.BASE_URL,
      routes
    })
    

    路由模式拓展

    路由的hash和history模式的区别

    1. 首先hash模式url带#号,history不带#号
    2. hash模式前端路由修改的是hash值(#及以后),对后端没影响,因此改变hash也不会重新加载页面,比如修改为了不存在的#123页面,页面不会跳转;
      history模型刚好相反,没有对应的页面就会出现404

    打包路由选择

    • 前端测试用 hash 模式
    • 项目上线不想要url#号的话使用history模式,不过使用history模式需要与后端沟通,需后端配置
    展开全文
  • 基于gulp打包vue单页

    2019-08-12 03:04:59
    基于gulp打包vue单页
  • vue打包路径设置

    千次阅读 2021-03-24 17:01:39
    vue 打包路径设置vue打包默认路径css中图片路径等 vue打包默认路径 1.vue打包之后的默认路径是从根目录开始算的,如果你的项目并不是根目录,而是子目录,这种设置就会导致路径错误, 解决方法:修改config/index.js...

    vue打包默认路径

    1.vue打包之后的默认路径是从根目录开始算的,如果你的项目并不是根目录,而是子目录,这种设置就会导致路径错误,
    解决方法:修改config/index.js下面的代码,将assetsPublicPath: '/'跟路径修改为assetsPublicPath: './'当前文件夹路径
    在这里插入图片描述

    css中图片路径等

    解决之后,发现组件中的css的背景图片路径不对,无论放到static还是assets里面,最后解析出来的都是/static/img/static/img/…; 很显然最后的结果图片都会打包进static里面,路径也会修改为根路径,但是在css中被当做是相对路径了
    在这里插入图片描述

    解决方法:修改在build/utils.js中代码,添加路径为…/…/;解析之后会变成…/…/static/xxx…,相当于将文件目录前移两层文件夹再向下获

    在这里插入图片描述

    if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader',
            publicPath: '../../'
          })
        } 
    

    线上不显示工程源码

    在这里插入图片描述

    productionSourceMap:false,  // 设置上线后是否加载webpack文件
    
    展开全文
  • vue打包篇-优化压缩包体积,CDN

    千次阅读 2022-04-13 11:29:51
    vue程序代码写完了,不做任何优化,发现包有点大,为此我们需要分析打包文件中都有些什么。
  • vue打包上线并清除缓存机制

    千次阅读 2022-03-24 13:51:11
    第一步,html增加meta标签 <meta ... <... 第二步,修改打包之后的js、css、image的命名规则 在vue.config.js种修改配置 filenameHashing: false,// 此步骤也省略。 configureWebp
  • vue项目打包命令

    千次阅读 2021-11-29 22:44:28
    在本地项目打开Dos小黑窗口 打包命令: mvn clean package -Dmaven.skip.test=true 命令解释:先清理项目,再跳过测试,打包
  • vue打包后dist的使用

    千次阅读 2022-03-15 09:24:08
    经过多次网上查询后发现这是由于vue打包时,脚手架会帮你配置好大量参数,但其中路径publicPath被配置为了"/",需要手动修改。 解决办法 1、将vue.config.js中的publicPath:"/“修改为publicPath:”./" 2、删除之前...
  • Vue打包CDN加速优化

    千次阅读 2020-01-02 16:19:26
    vue.config.js const isProduction = process.env.NODE_ENV === 'production'; const cdn = { css: [], js: [ 'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js', 'https://cdn.boo...
  • vue打包js文件混淆加密保护

    千次阅读 热门讨论 2021-11-22 22:49:40
    部署到服务器上的vue项目在网页F12之后能看到源码,vue文件啦,js文件啦,都能看到,连我的注释都能看到,这能随便给别人看? 环境 vue 3 vue cli 4 webpack 4 解决方案 方案一 工具:“uglifyjs-webpack-plugin”...
  • vue项目打包布署

    千次阅读 2021-12-25 13:35:47
    Vue项目打包部署本身不复杂,不过一些前端同学可能对服务器接触不多,部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题,内容概览: ...
  • vue打包之后字体乱码

    千次阅读 2020-07-28 14:51:40
    现在的情况是这个亚子。 部署到服务器就变成这个样了 解决方式还在摸索。。。。。
  • vue项目+hbuilder打包实现app自动检测更新并下载vue项目+hbuilder打包实现app自动检测更新并下载
  • vue打包文件过大

    千次阅读 2019-07-28 16:30:53
    H5:dist打包有8M左右. 原因:1)项目功能繁杂;2)选择任一地址等插件的下载; #尝试解决方法:局部引用element-日期时间选择器。 1,(.babelrc)添加 "es2015", { "modules": false } "plugins": [ [ ...
  • vue打包加版本号

    千次阅读 2020-03-04 15:29:41
    vue打包会用随机字符串作为文件名,控制静态资源及时更新,但是有些时候,浏览器就是不更新,可以在引入静态资源后面再添加版本号。 vue-cli 2.0 修改build/webpack.prod.conf.js,在HtmlWebpackPlugin插件配置项...
  • 【BUG】Vue打包后在nginx刷新出现404

    千次阅读 2022-04-14 11:26:09
    本地正常,但是打包部署到Nginx后界面刷新出现404 原因 vue路由用的history 解决方案: 在nginx.conf 中加入:try_files $uri $uri/ /index.html; location / { root 项目地址; index index.html index.htm; try_...
  • Vue打包路径配置

    千次阅读 2018-10-19 15:06:30
    1. 配置文件 module.exports = { // ...... // 相对路径都是相对于... // index,assetsRoot两个路径基本不用改动,只是用于文件打包存放的路径 // index.html的路径 index: path.resolve(__dirname, '../dist...
  • vue项目打包apk

    千次阅读 2022-02-20 11:05:24
    准备工作 安装vue npm install -g @vue/cli npm install -g @vue/cli-init 创建项目vue vue init webpack my-vue-project ...cordova项目内打包 my-vue-project:找到config/index.js文件;修改 ...
  • 运行vue打包的dist文件

    千次阅读 2021-12-06 10:24:13
    npm install -g serve(全局安装) serve -s dist(运行打包后的文件) 若npm安装失败,请移步:node.js安装失败解决方法
  • vue项目打包流程

    千次阅读 2021-01-09 16:56:45
    vue项目打包流程 二、打包优化 1.首先在根目录下面创建一个vue.config.js文件 2.去除.map文件,在vue.config.js文件里面抛出一个对象,然后把下面两段代码写到对象里面,然后在控制台或者终端通过npm run build命令...
  • Vue 打包上线之后 console.log()打印

    千次阅读 2022-04-25 14:32:29
    vue.config.js中配置 const TerserPlugin = require('terser-webpack-plugin') module.exports = { configureWebpack({ optimization: { minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_...
  • vue打包上线的代理问题

    千次阅读 2020-09-09 20:19:49
    若依管理系统vue proxy代理导致打包上线出现问题: 最近在使用若依管理系统中出现了代理服务导致的问题,代码如下: vue.config.js文件配置 devServer: { host: '0.0.0.0', port: port, proxy: { // detail: ...
  • 【云服务器的商家一般都给自己的接口解决了跨域问题(直接https或者http请求就可以),一般可以直接请求】 根据1和2情况的不同,nginx也有两种配置方式 1、请求数据地址同样为本机开启的localhost地址。 location /api ...
  • vue 打包后文件命名

    千次阅读 2019-04-10 18:06:02
    在 confige文件中的 index
  • Vue打包部署出现白屏

    千次阅读 2020-07-04 18:44:22
     我们用vue项目在本地跑的时候一切正常,当时我们用npm run build命令打包并部署服务器后,发现Index展示的是白屏,控制台显示资源都能正确访问到 2、原因  出现这个问题的原因就是Vue路由模式的设置问题,首先...
  • vue+springboot打包发布

    千次阅读 2020-10-08 14:30:06
    前面介绍过感觉vue和springboot的几篇文章,当一个项目做完了后,就该打包发布了。本节就研究下打包发布。 vue element admin开发 vue+springboot分页交互 项目使用的技术: 开发工具: idea 前端: 使用vue ...
  • vue 打包 vue.config.js

    千次阅读 2020-07-23 22:46:00
    // vue.config.js module.exports = { // options… publicPath:’./’, // outputDirL:‘dist’, // assetsDir:‘static’, indexPath:‘index.html’ }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 104,495
精华内容 41,798
关键字:

vue打包方式