• Vue打包上线部署


    一、路径问题

    1、脚手架+webpack打包通过npm run build,但是后台tomcat部署上线的时候,会衍生出一些问题,比如,路径问题(因为在项目中,我们使用了绝对路径,这里必须要使用相对路径,但是打包后还是会报错,说是找不到assets文件夹下的各种资源,包括images,css,js,是因为,在当初在全局引用的时候写在了index.html中,安全起见,可以写在app.vue中);

    2、在打包前还要在config文件夹中的index.js中设置一个路径问题,不然也会报错,在js中找到build:{assetsPublicPath:'/'},默认路径是‘/’,需要加上'.',写成、'./’(一般正常编辑代码是只进行本步修改即可)。

    二、favicon.ico问题

    1、favicon图标也在index.html中引入了link的那句话,这个可以在build文件夹中的webpack.dev.conf.js

    中的new HtmlWebpackPlugin({

    favicon:'./logo.ico'

    })加上这个路径,便可以找到这个图标了。

    三、静态资源找不到问题

      

    配置文件一:build>>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件(图片路径失效)的问题)

    四、打包好后可以自己测试运行是否正常问题

    1、这个时候需要用到node中的express,方法如下:

    安装express:npm install -g express

    最新版的express4.0版本中将命令工具分家出来,还需要安装一个命令工具:npm install -g express-generator

    创建一个express工程:express helloworld

    进入项目主目录:cd helloworld

    安装必备包:npm install

    启动express程序:npm start

    最后把打包好的dist文件夹放在public文件夹里,访问http://localhost:3000/dist就能看的项目了,这样测试好后,就可以丢给后台了。

  • 相关阅读:
    可视化工具gephi源码探秘(一)
    在ssh中利用Solr服务建立的界面化站内搜索---solr2
    Nutch源码阅读进程5---updatedb
    利用Solr服务建立的站内搜索雏形---solr1
    Nutch源码阅读进程4---parseSegment
    Nutch源码阅读进程3---fetch
    VS2015编译GEOS3.5.1源码
    VS2015编译GDAL2.2.1源码
    UE4读取脑电波MindWave插件(展示如何使用第三方库制作UE4插件)
    UE4修改自Rama的UDP通信蓝图插件
  • 原文地址:https://www.cnblogs.com/lan-cheng/p/9554428.html
Copyright © 2020-2023  润新知