很楠不爱3

这个屌丝很懒，什么也没留下！

热门标签

【vue】项目打包&部署到tomcat&express部署&无法请求后台接口404&Access-Control-Allow-Origin跨域问题_vue项目部署到服务器上,接口访问不了

作者：很楠不爱3 | 2024-02-20 16:25:42

踩

vue项目部署到服务器上,接口访问不了

vue项目打包&express部署

2022/3/30 周三

vue新手入门，如有错误，欢迎在评论区指出，非常感谢！

一、vue项目打包

cnpm run build 命令打包

默认会打包到项目文件夹下的 dist 文件夹里

遇到问题：

1. 打包后点击页面一片空白

config下面的index.js中，bulid模块里修改导出路径，assetsPublicPath 的 '/'改为 ‘./’

2. 图片等静态资源没有访问到

build下面的utils.js中，找到 generateLoaders 方法的 return ExtractTextPlugin.extract

在里面加一行 publicPath:“…/…/”

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
1
2
3
4
5
6
7
8
9

二、部署到tomcat

在tomcat的webapps里建一个自己的项目文件夹，如我的是XEFC
在这里插入图片描述
把打包获取的static文件夹和index.html放到里面就好了：

可以放多个vue项目，最后以文件夹名称区分来访问，如localhost:8080/XEFC和localhost:8080/CarRiskReport

现在如果直接访问localhost:8080是到tomcat的页面，如果需要直接访问到自己项目的界面，可以手动配置tomcat的首页，在conf文件夹里的server.xml文件配置Context节点：

      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">
		<Context path="" docBase="D:\Program Files\apache-tomcat-9.0.62\webapps\XEFC"/>
        <!-- SingleSignOn valve, share authentication between web applications
             Documentation at: /docs/config/valve.html -->
        <!--
        <Valve className="org.apache.catalina.authenticator.SingleSignOn" />
        -->

        <!-- Access log processes all example.
             Documentation at: /docs/config/valve.html
             Note: The pattern used is equivalent to using pattern="common" -->
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />

      </Host>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果有这个节点就修改docBase的映射，原来有可能是配置的ROOT，改成你的项目文件夹名字就好了；如果本来没有这个节点，那就加上这一句。

三、部署到express本地服务器

打包后的vue项目可以部署到express本地服务器上运行。

（注意，express首先需要有node环境，node.js环境搭建可参考：vue笔记day01-vue入门&node.js环境搭建）

1. 搭建express环境

（1）先安装express和生成器

npm install express -g
npm install express-generator -g
1
2

（2）配置环境变量

记得将全局的node_global文件夹路径添加到环境变量的path中

（比如我的是D:\nodejs\node_global）

（3）express --version 出现版本号即为安装成功

2. 创建express项目

cd 进入需要安装项目的盘

执行 express expressDemo 创建项目（expressDemo为我自定义项目名）

3. 安装项目依赖

cd expressDemo
npm install
1
2

4. 部署vue项目

把dist目录下的所有文件（static包和index.html）复制到express项目的public文件夹下

5. 启动express项目

npm start 命令启动

打开浏览器，输入 http://localhost:3000 , 就可以看到效果了

6. 修改端口号

如果需要修改端口号，去bin文件夹下的www文件，修改里面的3000为需要设置的端口号：

var port = normalizePort(process.env.PORT || '3000');
1

遇到问题：

1. 请求后台的接口路径错误，404

修改vue项目config文件夹下的prod.env.js和dev.env.js配置

可以参考 Vue打包丢到服务器-请求后台的接口路径错误解决，很详细。

2. net::ERR_CONNECTION_REFUSED / Uncaught (in promise) Error: Network Error

忘记切内网了… …

3. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. / net::ERR_FAILED 200

cors阻止了你请求的资源（跨域问题）

后端的接口类上添加 @CrossOrigin 注解

4. 控制台报错 favicon.ico 404 (Not Found)

这个报错不影响页面展示，不过也可以设置一个图标：

方法一：在vue项目里设置
（1）创建一个favicon.ico文件，注意不能放到src中，否则外部访问不到
（2）在HTML页面中的 <head></head> 标签中添加入一行代码：

<link rel="shortcut icon" href="static/assets/images/favicon.ico" rel="shortcut icon" />
1

方法二：在express项目里设置
（1）创建favicon.ico文件放到public/images里
（2）同样在HTML页面中的 <head></head> 标签中添加入代码：

<link rel="shortcut icon" href="./images/favicon.ico" rel="shortcut icon" />
1

参考文章：
1.webpack打包vue项目之后生成的dist文件该怎么启动运行
2.【node.js】windows安装express：‘express’ 不是内部或外部命令，也不是可运行的程序或批处理文件。
3.跨域问题 HAS BEEN BLOCKED BY CORS POLICY: NO ‘ACCESS-CONTROL-ALLOW-ORIGIN‘ HEADER IS

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】