页面修改以后并没有改变

开发环境idea，用tomcat启动。

img


修改了如图vue文件，直接启动程序页面没有没有发生改变。b站看视频说是要进行编译，不知道要怎么编译。

问题可能是由于Vue文件没有正确编译导致的。
Vue是前端开发的一种技术，它应该在前端项目中使用，然后使用Webpack或者其他编译工具将其编译成JavaScript代码。如果您的Vue文件没有正确编译，那么它将无法在浏览器上正确运行。
要解决这个问题，您需要进行以下操作：
运行npm run build命令。这个命令将会自动编译您的Vue文件，并将其转换为JavaScript代码。您只需要在IDEA中的Terminal命令行工具中执行命令即可。
检查IDEA中的前端自动构建是否开启。通常情况下，IDEA会自动进行前端构建。如果它没有工作，您需要确保前端构建功能是已经启用的。可以在IDEA的设置选项中找到相关选项并进行调整。
检查您的Tomcat服务器中的目录是否正确。在Vue编译完成后，您需要将编译结果放到Tomcat服务器的正确目录下。检查一下您Vue编译完成后生成的JavaScript代码是否位于Tomcat服务器的正确目录下。

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7640684
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：记录-关于idea运行Tomcat报端口占用，但是却找不到进程占用
  • 除此之外, 这篇博客: idea启动Tomcat项目发现端口一直被占用，但是没有进程在使用该端口中的 原因分析 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 按照网络上其他人碰到类似的问题，原因大致如下：

    1. 是这些端口有可能是被 Hyper-V 保留了

    控制面板\程序\程序和功能\启用和关闭windows功能

     但是我的Hyper-V确实关闭着也没有开启，所以并未解决。

    2.端口确实被其他服务预留了：

    win+R 输入cmd 打开dos命令框，查看当前被占用的端口范围：

    netsh interface ipv4 show excludedportrange protocol=tcp

     好吧，只能使用这些被占用的端口之外的其他端口。

  • 以下回答由chatgpt基于相关博客总结生成:

    回答:

    在修改vue文件后，页面未发生改变，可能需要进行编译，以下是具体步骤：

    1. 确认配置路径：首先要确认在IDEA中tomcat打开会默认使用的访问路径，可以在tomcat配置中查看。

    2. 编译vue文件：可以使用vue-cli提供的命令来编译，具体命令如下：

    npm run build

    在执行该命令前需要保证已经安装好了node.js和vue-cli，并且进入vue项目目录。

    1. 配置tomcat：在IDEA启动tomcat服务器时可能会出现问题，可以在IDEA配置中勾选tomcat并点击apply---ok按钮解决该问题。

    2. 修改tomcat配置文件：如果以上方法都不能解决问题，可以尝试修改tomcat下的conf/logging.properties文件，添加如下配置：

    org.apache.catalina.core.ContainerBase.[Catalina].[localhost].[/].level = INFO
org.apache.catalina.core.ContainerBase.[Catalina].[localhost].[/].handlers = 2localhost.org.apache.juli.FileHandler

    如果UTF-8不行，可以尝试换成GBK。

    以上是可能解决页面修改后没有反应的问题的具体步骤，如果以上方法都不能解决该问题，可能需要更进一步的排查。

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
对于Vue项目，在开发环境下更改了代码后，需要进行编译才能更新页面。编译可以使用命令行或者打包工具进行。下面是使用webpack打包工具进行编译的步骤，具体步骤如下：

  1. 安装webpack和相关模块，可以使用以下命令全局安装：
npm install -g webpack webpack-cli webpack-dev-server
  1. 在项目根目录下创建一个webpack.config.js文件，用于配置webpack的打包规则和需要打包的文件路径。一个简单的配置示例如下：
const path = require('path');

module.exports = {
  entry: './src/main.js', // 入口文件
  output: { // 输出文件
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'development', // 开发模式
  module: {
    rules: [ // 打包规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  devServer: { // 开发服务器
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};
  1. 在package.json文件中添加以下scripts，用于启动webpack并监听文件的更改：
"scripts": {
  "dev": "webpack-dev-server --inline --progress --config webpack.config.js"
},
  1. 执行命令npm run dev启动webpack-dev-server，此时webpack会监听文件的变化，并自动进行编译和打包。在浏览器中输入`http://l/