vue build 相对路径 如何变成绝对路径_微服务和VUE(27):VUE前端工程打包

1. 介绍

在我们完成代码编写之后,肯定是要把前端和后端 部署到服务器上面的,因此在部署之前,我们需要先打包我们的项目文件。

VUE工程打包很方面,在工程目录下运行:

npm run build

若不报错,就成功了。一般不会报错,当然第一次打包的时候,我也遇到了一些错误,笨笨的我不知道如何解决,直接重新建了一个新的工程,把原来的文件该复制的复制,很神奇的就ok了。

在打包之后,会新生成dist文件夹,里面有static文件夹和index.html文件。

因为VUE配置文件本身的问题,我们原来img和js文件的路径在打包之后会出现问题,因此我们需要修改以下两个js文件。

2. 修改config/index.js文件

修改

assetsPublicPath: '/',

改为:

assetsPublicPath: './',  (加个点)

注意这句话出现了两处。具体文件,搜索一下就ok。

3. 修改build/utils.js文件

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

其中,加上:publicPath: '../../'。

4. 打包

完成以上的修改,我们就可以进行打包了。

npm run build

若出现类似下面的图片,说明安装成功

c0ccc9b6a83a037738bc91e9ce2e20c2.png

这时候,在工程目录下会出现dist文件夹。

43b59f26b1e554fe1713352bb033a0ae.png

我们可以直接打开index.html

24edc04cfca300849b10a9805b21b083.png

如果打开发现是空白页面,在检查第2步,第3步是否出现问题。

5. 使用tomcat测试

tomcat安装教程,额,自己的查查吧。

5.1 使用管理员身份,开启tomcat服务

注意:使用管理员身份,否则会报错

152c5e75f1e3035e6c74d2d8a383a327.png

进入Tomcat安装路径中bin文件夹

运行:net start tomcat8  (tomcat我安装的是8).

5.2  验证tomcat是否开启成功

浏览器输入:http://localhost:8080

若出现下图,则说明启动成功

d8bc5b7cb0999633a688d74713f305cc.png

5.3  文件复制

打开tomcat目录下的webapps,在此文件夹中新建admin文件夹(名字随便去)。将我们打包生成的dist文件夹中的static和index复制到admin文件夹中。

ba38fe69d864eda753f3d0c687c94cb3.png

5.4 浏览器验证

浏览器输入: http://llocalhost:8080/admin/

e162f194a04c05d4967b6c07a4269e06.png

启动成功,若有服务器的话,我们就可以直接将生成的dist文件夹传到服务器上了。如果我们服务器上也是使用的是tomcat服务器,那么放到tomcat目录下的webapp文件夹中就ok。当开启tomcat服务后,我们就可以通过服务器的ip和tomcat的接口访问到我们的网站了。

6.总结

VUE打包很方便,但是需要注意的是,第2步,和第3步中的修改。这里修改的作用是为了使打包后产生的index.html文件可以正确找到JS,CSS等文件,否则这些文件的相对路径是错误的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的信息,根据错误提示"dialogsuper.vue:1 uncaught error: module build failed (from ./node_modules/v"来看,这个错误可能是由于无法正确构建模块导致的。 首先,我们可以检查是否正确安装了相关依赖项。可以通过运行npm install命令来安装项目所需的依赖项。确保package.json文件中列出的依赖项正确安装,并且没有报错。如果发现有任何错误,请根据错误提示进行修复。 其次,我们可以检查webpack配置文件是否正确。webpack是一个模块打包工具,它可以将多个文件打包成一个文件。根据错误信息,可能是webpack配置文件中出现了错误。可以尝试打开webpack配置文件(通常命名为webpack.config.js),并检查其中是否有任何语法错误或配置错误。 另外,还可以检查dialogsuper.vue文件本身是否存在错误。根据错误信息,模块构建失败可能是由于在dialogsuper.vue文件的第一行上出现了语法错误,这可能导致模块无法正确构建。可以检查该文件是否使用了正确的语法,并确保文件内容没有任何错误。 最后,还可以尝试升级依赖项版本。有时,某些依赖项的旧版本可能与其他依赖项或构建工具不兼容,从而导致模块构建失败。可以尝试使用较新的依赖项版本,并确保升级后的依赖项与其他依赖项兼容。 总之,根据提供的错误信息,我们可以从检查依赖项安装、检查webpack配置、检查文件语法以及升级依赖项等方面进行排查,以找出导致模块构建失败的原因,并进行相应的修复。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值