vue打包后文件里路径多了./static
时间: 2023-05-10 08:01:39 浏览: 88
Vue在打包时,会将所有的相对路径都转化为绝对路径。而在打包后的文件中,路径多出了./static,这是因为Vue默认情况下会将所有静态资源放在static文件夹下,因此在打包后的文件中,所有静态资源的路径都会以./static开头。
如果你不想在打包后文件的路径中看到./static,你可以通过修改Vue配置文件来实现。具体来说,你可以在build/webpack.base.conf.js文件中找到output.publicPath的选项,将其改为'/'即可。
除此之外,你也可以通过在Vue组件中使用绝对路径来避免这个问题。例如,如果你想在组件中引用static文件夹下的一张图片,你可以这样写:
<img src="/static/img/logo.png">
这样一来,打包后的文件中路径就不会多出./static了。
相关问题
springboot vue mybatis项目src/main/resources/static
`src/main/resources/static` 目录是一个常见的 Spring Boot 项目用于存放静态资源文件的目录,包括 CSS、JavaScript、图片等文件。这些文件可以被直接访问,而不需要经过 Spring MVC 的处理。
在使用 Vue.js 开发前端页面的时候,可以将 Vue.js 项目的打包文件(通常是一个包含了 HTML、CSS、JavaScript 等文件的静态资源文件夹)放置在 Spring Boot 项目的 `src/main/resources/static` 目录下,然后在 Spring Boot 项目中配置对应的路由,使得用户可以通过访问 Spring Boot 项目的 URL 来访问 Vue.js 页面。
例如,假设 Vue.js 项目打包后的静态资源文件夹为 `dist`,则可以将其复制到 Spring Boot 项目的 `src/main/resources/static` 目录下,然后在 Spring Boot 项目的 `application.properties` 文件中添加如下配置:
```
# 配置 Spring Boot 的静态资源访问路径
spring.mvc.static-path-pattern=/static/**
spring.resources.static-locations=classpath:/static/
```
这样,当用户访问 Spring Boot 项目的 URL 为 `/static/**` 的路径时,就会自动映射到 Spring Boot 项目的 `src/main/resources/static/` 目录下的对应文件。例如,如果 Vue.js 项目打包后的入口文件为 `index.html`,则可以通过访问 `http://localhost:8080/static/index.html` 来访问 Vue.js 页面。
需要注意的是,如果 Vue.js 项目中需要调用 Spring Boot 后端接口,可以通过 AJAX 或者 Axios 等方式来发送请求。在开发过程中,可以使用代理服务器(如 webpack-dev-server)来解决跨域问题,在生产环境中则需要在 Spring Boot 项目中进行跨域配置。
const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ // 基本路径 整个文件夹在哪 publicPath: "./", // 输出文件目录 文件夹名 outputDir: "scjwap", // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 资源放的目录 assetsDir: "./static", transpileDependencies: true, devServer: { proxy: { "/api": { // 匹配所有以 '/api1'开头的请求路径 target: "http://172.16.0.40:8080", // 代理目标的基础路径 changeOrigin: true, }, }, }, chainWebpack: config => { const oneOfsMap = config.module.rule('less').oneOfs.store oneOfsMap.forEach(item => { item .use('sass-resources-loader') .loader('sass-resources-loader') .options({ resources: 'src/assets/qin.less'// 全局less文件的地址 }) .end() }) } });
这段代码是一个 Vue.js 项目的配置文件,主要包含以下内容:
- publicPath: 表示应用被部署在服务器的基础路径,默认为“/”,这里设置为“./”表示在当前路径下部署。
- outputDir: 表示打包后生成的文件目录,这里设置为“scjwap”。
- assetsDir: 表示静态资源文件夹的名称,这里设置为“./static”表示在 outputDir/scjwap/static 目录下。
- transpileDependencies: 表示 Babel 是否转译依赖,默认为 false,这里设置为 true 表示转译依赖。
- devServer: 表示开发服务器的配置,其中 proxy 字段表示代理配置,将以“/api”开头的请求代理到“http://172.16.0.40:8080”。
- chainWebpack: 表示配置 Webpack 的链式操作,这里是为了使用 sass-resources-loader,将“src/assets/qin.less”文件作为全局 Less 文件引入。
总体来说,这个配置文件的作用是为 Vue.js 项目提供一些基本的配置信息,包括静态资源路径、打包输出路径、代理配置等等。