关于vue-cli3打包

发表于
字数统计 469 | 阅读时长 2

关于vue-cli3打包，解决项目中的问题。

打包

打包直接npm run build,会在项目文件下生成一个dist文件夹，但是打开index.html为空白。

首先，在vue.config.js中加入如下内容

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
  //基本路径
  //baseUrl: './',//vue-cli3.3以下版本使用
  publicPath:'./',//vue-cli3.3+新版本使用
  // assetsDir: './', //本地打开index.html访问静态资源
  // 输出文件目录
  outputDir: 'dist',
  // webpack-dev-server 相关配置
  devServer: {
    port: 8888,
  },
};

再次打包

本地查看

方法一

  • 项目下执行 npm install -g serve

  • 执行 serve -s dist，看到如下画面

方法二

  • 项目下执行npm install http-server -g
  • 然后在dist文件下执行http-server

部署到Tomcat

  1. 到vue项目中修改vue.config.js文件：
  • 修改 publicPath: process.env.NODE_ENV === “production” ? “/你在Tomcat新建的文件夹名称/“ : “/“,
  1. 在路由router.js文件中添加
  • base:’/你在Tomcat新建的项目文件夹名称/‘,
  1. 在Tomcat的webapps下的项目文件夹目录下新建一个WEB-INF的文件夹，打开此文件夹再新建一个web.xml的文件。文件内容如下： 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0"
  metadata-complete="true">

  <display-name>webapp</display-name>
  <description>
     webapp
  </description>
  <error-page>  
   <error-code>404</error-code>  
   <location>/</location>  
</error-page>  
</web-app>

  1. 上传访问

    将打包生成的文件夹下的内容上传到Tomcat服务器webapps下的项目文件夹，浏览器输入ip:端口/文件夹名称即可访问。

注：转载文章请注明出处，谢谢~