精华内容
下载资源
问答
  • 1.ajax请求如果请求要添加cookie...2.ajax传送canvas图片,canvas.toDataURL(type),type默认为image/png,将canvas转换成base64格式,但是base64无法直接以字符的形式传送给后台接口,需要以formdata上传文件的方式...

    1.ajax请求如果请求要添加cookie,已达到登录的效果,需要在ajax的属性中添加xhrFields: {withCredentials: true}。

    2.ajax传送canvas图片,canvas.toDataURL(type),type默认为 image/png,将canvas转换成base64格式,但是base64无法直接以字符的形式传送给后台接口,需要以formdata上传文件的方式上传。

    images是base64字符串,转换成文件流后上传,以二进制文件形式上传。

    3.es6开发,并不是所有浏览器都能兼容es6语法,为了让她兼容,可以用webpack工具打包让它被兼容。且主文件应该导入被处理之后的es6的js文件。

    例:import $ from 'jquery'。

    一、项目中如何安装webpack文件:

    首先 根目录下npm init -y创建package.json文件,之后创建src文件夹并附带index.html,npm install jquery -s,根文件夹上运行npm install webpack webpack-cli -D命令安装webpack包,并且在根目录上创建webpack.config.js,在webpack配置文件中,初始化如下基本配置。

    module.exports = function(){

    mode: 'development'     //用来指定构建模式

    }

    在package.json中,新增scripts节点

    ‘scripts’:{

    ‘dev’:'webpack'         //scripts下的脚本可以通过 npm run执行

    }

    且千万不要在package.json文件中添加注释,不然无法加载webpack。在终端中运行 npm run dev启动webpack进行项目打包。至此webpack基本配置已实现,在根目录下生成dist文件夹并附带main.js,这就是打包压缩后的输出文件

    二、若想修改 入口文件及输出文件,在module.exports加入entry 、output

    module.exports = {

    entry: path.join(_dirname,'./src/index.js'), //必须配置核心path模块

    //入口文件,每有一个键值对,就是一个入口文件 值可以是一数组

    output:    {

    //配置打包结果

    path:path.resolve(__dirname,'./dist')

    //定义了输出的文件夹的位置

    filename:'bundle.js'

    //定义打包结果文件名称

    },

    }

    三、如何让webpack自动打包(即每次修改后,能自动将js文件中的内容自动更新并且打包更新压缩文件)

    1npm install webpack-dev-server -D命令 安装自动打包工具

    2修改package.json下scripts下dev命令 webpack-dev-server

    3将index.html文件下引入js文件 修改为根目录下不可见的(虚拟的)压缩文件bundle.js文件(并非dist文件下可见的bundle.js文件),最后使用npm run dev重新打包

    4查看localhost:8080即可查看效果

    四、配置 html-webpack-plugin 生产浏览页面:(生成一个index.html存在于内存中,即http://localhost:8080/会直接跳入内存中虚拟的index.html页面)

    1 运行 npm install html-webpack-plugin -D 命令,安装生成预览页面插件。

    2修改webpack.config.js头部区域。

    const htmlwebpackplugin = require('html-webpack-plugin');

    const htmlplugin = new  htmlwebpackplugin({

    template: './src/index.html',

    filename: 'index.html'

    })

    module.exports = {

    plugins: [htmlplugin]   //plugins 数组是webpack打包期间用到的插件列表

    }

    3执行 npm run dev

    五、打包完成后,自动打开浏览器页面

    package.json文件下配置参数

    六、webpack加载器

    通过loader打包非js模块(非js后缀名结尾的模块需要需要loader加载器才可以打包)

    loader的基本使用

    1在index.js上导入css 例import './1.css'

    2

    test表示匹配文件类型,use表示要调用的loader,use指定的loader顺序是固定的,多个loader调用顺序是从后往前调用的。

    webpack加载器基本使用

    打包处理less文件,

    1运行 npm i less-loader less -D命令

    module: {

    rules: [

    { test: /\.css$/, use: ['style-loader','css-loader'] },

    { test: /\.less$/, use: ['style-loader','css-loader','less-loader'] }//新增处理less

    ]

    }

    2打包处理scss

    添加sass

    import './css/1.scss'

    4配置postcss 自动配置css的前缀

    5配置图片路径

    ?后面为loader参数项,只有小于limit大小的图片能被转换成base64

    6打包处理js文件的高级语法

    三、vue单文件组件

    webpack配置vue组件加载器,在src文件夹下面index.js文件中加入 import  App  from './components/App.vue',

    webpack项目中使用vue

    3.5webpack打包与发布

    4vue脚手架(为了快速生成vue结构)

    vue -v验证vue版本号以及是否安装(vue-cli安装在目标目录中)

    在目标目录中,输入 vue create xxx(项目名),之后选择对应选项,建议选择手动安装模式(Manully select features)进入选择‘’安装功能的界面‘’如上图所示

    单击空格出现*号,选择对应的选项 1Babel 2 Rounter(需点击空格) 3Linter/Formatter

    之后进入界面选择是否安装历史模式的路由(rounter),选择否,因为需要安装哈希模式路由(如下图所示)

    之后会询问etc babel eslint这些文件在哪创建,选择创建单独的文件中(in dedicated files)。

    之后跳出 save this as a preset for feature project(是否将他保留当做以后项目的模板)。

    安装完成后,进入该项目,点击 npm run serve运动项目

    图形化界面创建vue新项目:

    在项目根目录中cmd输入vue ui,进入界面后->创建->在此创建新项目,根据上面的手动操作方式创建新项目

    3‘.在根目录下面 vue install -g @vue/cli-init,之后创建新项目 vue init webpack xxx(项目名)

    runtime+compile是编译版,runtime是低配版,除此外没什么要注意的

    vue脚手架自动配置,自定义配置

    法二:在根目录下,新建vue.config.js文件,加入以下内容,运行npm run serve即可自动打开浏览器

    module.exports ={

    devServer:{  //自动打开浏览器

    open:true,

    port: 8878

    }}

    Element-UI的基本使用

    1手动安装element-UI npm i element-ui -S

    2导入element-UI 相关资源,在src/main.js里面加入

    之后将element-ui代码复制进入App.vue文件下app 内部,将代码靠近左边。

    二vue ui 导入

    配置element-ui,在‘插件‘下选择vue-cli-plugin -element

    展开全文
  • 前端vue打包后部署方式

    千次阅读 2020-03-21 13:09:18
    一、背景 在当前背景下,前后端分离已经成为趋势,再也不是以前那个前后混合在一起的时代了。这次主要是记录下我从项目开发打包上线前部署时所遇到的坑,希望能帮助到其他... 在vue.config.js下添加 publicPath : "...

    一、背景
    在当前背景下,前后端分离已经成为趋势,再也不是以前那个前后混合在一起的时代了。这次主要是记录下我从项目开发打包上线前部署时所遇到的坑,希望能帮助到其他小伙伴,后端部署没什么好讲的,主要是前端的部署。点赞,点赞,点赞!!!!

    二、打包

    (1)设置打包后的静态资源路径(重要。说明:小编由于是新手在这里折腾了很久)

       在vue.config.js下添加

    publicPath : "/",(注意不要“./”,这样做有可能会造成资源路径加载错误,亲测。)

    注:具体不懂的同学可以参考官方文档: https://cli.vuejs.org/guide/deployment.html


      (2)在当前文件目录下运行 npm run build 即可完成打包

    三、部署环境准备

    我选用的是Nginx作为前端部署方式,当然你也可以选择tomcat,大同小异。

     1.下载Nginx  官网:http://nginx.org/

      下载过后打开Nginx->conf->config->nginx.conf

    代码:


    #user  nobody;
    worker_processes  1;

    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;

    #pid        logs/nginx.pid;


    events {
        worker_connections  1024;
    }


    http {
        include       mime.types;
        default_type  application/octet-stream;

        #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
        #                  '$status $body_bytes_sent "$http_referer" '
        #                  '"$http_user_agent" "$http_x_forwarded_for"';

        #access_log  logs/access.log  main;

        sendfile        on;
        #tcp_nopush     on;

        #keepalive_timeout  0;
        keepalive_timeout  65;

        #gzip  on;
        
        upstream my_server {                                                         
        server 172.16.1.199:8067;                                                
        keepalive 2000;

        }
        server {
            listen       8085;
            server_name  localhost;

            #charset koi8-r;

            #access_log  logs/host.access.log  main;

        #配置静态资源
        location / {
           # proxy_pass http://my_server;
           # proxy_set_header Host $host:$server_port;
          root   D:\360WiFi\dist;
          index  index.html index.htm;
          try_files $uri $uri/ /index.html;

        }
        #代理服务,访问服务器端
        location /prod-api {
            proxy_pass http://localhost:9000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection ‘upgrade’;
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
        
            #error_page  404              /404.html;

            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }

            # proxy the PHP scripts to Apache listening on 127.0.0.1:80
            #
            #location ~ \.php$ {
            #    proxy_pass   http://127.0.0.1;
            #}

            # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
            #
            #location ~ \.php$ {
            #    root           html;
            #    fastcgi_pass   127.0.0.1:9000;
            #    fastcgi_index  index.php;
            #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
            #    include        fastcgi_params;
            #}

            # deny access to .htaccess files, if Apache's document root
            # concurs with nginx's one
            #
            #location ~ /\.ht {
            #    deny  all;
            #}
        }


        # another virtual host using mix of IP-, name-, and port-based configuration
        #
        #server {
        #    listen       8000;
        #    listen       somename:8080;
        #    server_name  somename  alias  another.alias;

        #    location / {
        #        root   html;
        #        index  index.html index.htm;
        #    }
        #}


        # HTTPS server
        #
        #server {
        #    listen       443 ssl;
        #    server_name  localhost;

        #    ssl_certificate      cert.pem;
        #    ssl_certificate_key  cert.key;

        #    ssl_session_cache    shared:SSL:1m;
        #    ssl_session_timeout  5m;

        #    ssl_ciphers  HIGH:!aNULL:!MD5;
        #    ssl_prefer_server_ciphers  on;

        #    location / {
        #        root   html;
        #        index  index.html index.htm;
        #    }
        #}

    }
     

    效果图

    end:执行Nginx命令start Nginx   搞定了!!
     

    展开全文
  • 大家都知道VUE项目通过HBuilder X进行打包成APP,参考步骤:利用HBuilderX将vue项目打包成app 大家打包过程会发现:勾选DCloud老版本正式(我使用的是HBuilder X2.8以上版本)都要求实名制了,比较麻烦,不想实名制...

    大家都知道VUE项目通过HBuilder X进行打包成APP,参考步骤:利用HBuilderX将vue项目打包成app

    大家打包过程会发现:勾选DCloud老版本正式(我使用的是HBuilder X2.8以上版本)都要求实名制了,比较麻烦,不想实名制,实名制后然后又要啥来着。然后就选择了“使用公共测试证书”选项,发现这个打包过程还是失败,还要求开通什么账号,可能还要付费之类的:

    以上方法行不通,没办法,我只选择“使用自有证书”,也就是自己做证书,这个官网明确说:Android证书的生成是自助和免费的,不需要审批或付费

     或者第三方傻瓜式自动生成证书https://www.yunedit.com/createcert (没试过)

     

    制作证书的那个方法查看官网方法1:https://ask.dcloud.net.cn/article/35777

    官网大致总结3个步骤:

    步骤1:

    大概流程如下:最后一步选择:”是“,选择其他的就会循环让你输入前面的内容

    查看是否新建成功,别名是你上上图输入的,可以修改自己想要的

    生成成功,在HBuild会提示你证书生成路径在:D:/test.keystore,你只要上传就行

    步骤2:

    把你生成证书导入即可,内容如下,这个名称和密码是你刚刚输入的(看看官方文档)上图

    打包成功后会提示。。

    步骤3:

    查看云打包状态,然后下载,点击“运行”----> “原生APP-查看云打包状态”

    在HBuilder X工具的控制台中查看下载地址,点击下载即可。

     

    官网方法2:https://ask.dcloud.net.cn/article/36522 中也有公共证书下载。直接下载就可以使用

    打包修改如下:

    其他的方法如上。

     

    打包过程配置的几项注意,这个不是乱填的,需要在官网配置:

    https://dev.dcloud.net.cn/cloudbuild/count 通过这个网址新增

    展开全文
  • 随着vue的流行,越来越多的项目使用了vue作为前端框架,项目中遇到需要将vue打包到spring boot 中的static中,直接访问,不需要使用nginx,我们的方式是保持前后端完全独立开发代码,项目代码互不影响,借助jenkins...

    随着vue的流行,越来越多的项目使用了vue作为前端框架,项目中遇到需要将vue打包到spring boot 中的static中,直接访问,不需要使用nginx,我们的方式是保持前后端完全独立开发代码,项目代码互不影响,借助jenkins这样的构建工具在构建springboot时触发前端构建并编写自动化脚本将前端webpack构建好的资源拷贝到springboot下再进行jar的打包,最后就得到了一个完全包含前后端的springboot项目了,但是有时候需要本地打个完整的包,需要手工合并,并且容易出错,于是写了一个bat脚本在本地需要打包时使用。脚本如下供参考:

    @echo off

    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

    ::替换vue.config.js的配置

    setlocalEnableDelayedExpansionecho%~dp0set filePath=%~dp0\ijczz-meeting-web\vue.config.jsset oldContent=publicPath: '/'set newContent=publicPath: '/ijczz-meeting/meeting'echo%filePath%echo%oldContent%echo%newContent%::逐行遍历文件内容

    for /f "delims=" %%l in (%filePath%) do (

    echo%%lset line=%%l::替换字符串

    set "line=!line:%oldContent%=%newContent%!"

    echo!line!::将内容重定向输出到临时文件中

    echo !line!>>temp.txt)

    ::移动临时文件到原文件路径中,并重命名为原文件名,覆盖掉原文件

    move temp.txt %filePath%::替换settings.js的配置

    set filePath2=%~dp0\ijczz-meeting-web\src\store\modules\settings.jsset oldContent2='/apis'set newContent2='/ijczz-meeting'echo%filePath2%echo%oldContent2%echo%newContent2%::逐行遍历文件内容

    for /f "delims=" %%l in (%filePath2%) do (

    echo%%lset line=%%l::替换字符串

    set "line=!line:%oldContent2%=%newContent2%!"

    echo!line!::将内容重定向输出到临时文件中

    echo !line!>>temp.txt)

    move temp.txt %filePath2%::打包

    cd %~dp0\ijczz-meeting-webcallnpm installcall npm run build:prod--report::删除文件

    del /F /S /Q %~dp0\ijczz-meeting\src\main\resources\views\index.htmldel /F /S /Q %~dp0\ijczz-meeting\src\main\resources\static\meeting\staticdel /F /S /Q %~dp0\ijczz-meeting\src\main\resources\static\meeting\ueditordel /F /S /Q %~dp0\ijczz-meeting\src\main\resources\static\meeting\favicon.ico::复制文件

    xcopy %~dp0\ijczz-meeting-web\dist\index.html %~dp0\ijczz-meeting\src\main\resources\views\* /s /excopy %~dp0\ijczz-meeting-web\dist\static\* %~dp0\ijczz-meeting\src\main\resources\static\meeting\static\* /s /excopy %~dp0\ijczz-meeting-web\dist\ueditor\* %~dp0\ijczz-meeting\src\main\resources\static\meeting\ueditor\* /s /excopy %~dp0\ijczz-meeting-web\dist\favicon.ico %~dp0\ijczz-meeting\src\main\resources\static\meeting\* /s /epause

    bat脚本的内容包括了定义变量,替换字符串,调用npm打包,复制文件等语法,作为对bat脚本的初学者,get到bat脚本的语法的几个知识点:

    (1)在定义变量的时候不能留空格,比如filePath=%~dp0\ijczz-meeting-web\vue.config.js

    这里的等号两边不能留空格,%~dp0是指当前获取当前bat文件的目录,所以这个bat文件的执行位置应该要放在当前要执行该操作的工程同一个目录下。

    (2)bat脚本的替换文本字符串是通过每一行的比较,发现了需要替换的文字,然后把新的文字替换进去,然后把新生成的文件替换旧的文件,具体语法类似是 for /f "delims=" %%l in (%filePath%) do (set line=%%l  set "line=!line:%oldContent%=%newContent%!" echo !line!>>temp.txt)  move temp.txt  vue.config.js

    (3)调用npm打包的时候如果不加call,如:call npm install ,则会在npm打完包之后直接退出dos界面,在批处理脚本中,call命令用来从一个批处理脚本中调用另一个批处理脚本,通过这种方式则不会出现打完包直接退出,不执行后面dos命令的情况。

    (4)复制文件夹的命令是xcopy,不是copy,xcopy可以复制某个文件夹底下的所有子文件夹和文件,需要注意/s /e就是指复制整个目录下的文件及文件夹,不包括空子文件夹。

    (5)如果要让执行完整个bat脚本之后dos界面不消失,最有效的方式是通过在注册表里编辑HKEY_CLASSES_ROOT\batfile\shell\open\command,修改该项的数值数据为:cmd /E:ON /V:ON /F:ON /k "%1" %*   即可。

    展开全文
  • 在此之前,本人也尝试过网友的一些方法,但是,很多坑,跳进去就出不来,经过多个项目实践,现总结一下我用到的优化方式: cdn原理: 上线依赖(通常放在package.json>dependencies)不参与打包构建,全部通过cdn...
  • vue 打包文件路径不对解决方式

    千次阅读 2018-10-09 19:22:26
    npm run build 打包后报错 解决方式 assetsPublicPath: './' 这里加个前缀 这里加一行 publicPath:"../../" vue-cli3 需要在vue.config.js 文件中配置 module.exports = { baseUrl: process....
  • 主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 问题1在我的项目中遇到的情形是:打包后,css里加载的font文件路径变成了:rootpath/static/css/static/fonts,而期望的应该是rootpath/static/fonts。修改方式:在build/utils的ExtractTextPlugin.extract里加上 ...
  • VUE打包本地运行

    2020-04-18 13:35:51
    VUE打包本地运行 方式一 step1: 安装 http-server npm install http-server -g step2: 包目录下运行 http-server 或者 使用vscode :go alive插件 方式二 step1: 修改config/index.js 把assetsPublicPath: '/'改成...
  • electron-vue打包

    2019-10-04 09:43:13
    electron和vue整合项目的打包方式: 首先,打包方式不止这一种,我就说一下我打包成功的那种,嘻嘻~~ 1、全局安装electron-builder打包工具:npm install -gelectron-builder 2、在项目根目录下的package.json...
  • 今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题:Vue-cli项目在本地 使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cli项目通过npm run build 打包生成的 dist ...
  • vue打包配置

    2019-03-29 10:35:00
    vue项目开发中,遇到了一些坑,自行查了资料和文档,在本地引入背景图片报错,和打包之后会报404未找到图片路径错误,解决方法如下: 1、找到 config->index.js里面,如下修改 2、找到 build->utils....
  • plugin 的消耗换种方式处理图片使用 DLLPlugin积极更新 webpack 版本http://www.hangge.com/blog/cache/detail_2105.html​www.hangge.comVue.js - 提高项目build打包速度(webpack构建性能优化技巧汇总)Vue.js -...
  • vue打包优化

    2019-10-08 02:10:29
    网站首页第一次加载很慢,优化过后从十多二十秒缩短到了几秒,主要是打包的时候按需加载了,然后使用了gzip压缩。 这是优化之前的 发现vendor特别大,所有引用的第三...//这是以前的引入方式 import CommonLayout...
  • vue打包前优化

    2021-03-10 19:42:44
    打包优化 项目开始时webpack配置 vue-cli3以后,我们修改webpack配置,需要自己在项目根路径下创建vue.config.js文件。 一、 配置 proxy 跨域 使用vue-cli发开项目,在本地开发环境中,如果遇到跨域的问题。可以...
  • Vue中的渲染方式总结可分四种:原有模板语法,挂载渲染使用render属性,createElement函数直接渲染使用render属性,配合组件的template属性,createElement函数渲染使用render属性,配合单文件组件,createElement...
  • 其次常用vue+vueRouter+axios+vuex+elementUI ...避免打包 然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代码 externals: { 'vue': 'Vue', 'vue-router': '...
  • 最近了解了一些关于vue分页面打包方式,因为接触的可能不是很深入,所以就简单记录一下 首先第一步,修改vue目录结构,修改为下图的方式 大致分为: 1、在src下创建一个存储所有页面的文件夹, 2、创建每个...
  • vue打包,放到服务器

    2020-04-13 10:23:59
    打包 vue项目打包步骤 放到服务器 网上搜索到的相关问题和解决方法。1、求助!Vue项目用Webpack打包后放到服务器上,但访问是空白页?弄了好久了也不知道什么原因 ...3、Vue应用部署到服务器的正确方式 ...
  • vue打包速度优化

    2019-10-02 01:51:58
    在此之前,本人也尝试过网友的一些方法,但是,很多坑,跳进去就出不来,经过多个项目实践,现总结一下我用到的优化方式: cdn 原理: 上线依赖(通常放在package.json>dependencies)不参与打包构建,全部通过...
  • vue打包部署到docker

    2020-06-10 10:30:40
    npm run build 打包vue项目 启动 docker 将dist目录通过winscp等方式拷贝到linux服务器上,同目录下新建Dockerfile Dockerfile: FROM nginx:latest (latest是下载最新的nginx,也可以指定nginx版本) ...
  • Vue打包app实现检查更新功能 最近接收到一个需求,就是把移动h5的代码打包成安卓app 这个确实很符合这个时代“一套代码,多处编译”的趋势 而且混生App发展到这个时期 也已经可以做到很多原生app所能做到的事情 我的...
  • vue是目前最流行的前端框架,今天要介绍的是如何利用vue+webpack+express的方式进行前后端分离的开发,下面通过本文给大家分享vue 打包后的文件部署到express服务器上的方法,感兴趣的朋友一起看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,642
精华内容 656
关键字:

vue打包方式

vue 订阅