nginx 部署 vue 项目找不到js css文件的解决方法

很多时候 npm run build 之后， index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对，发布到服务器上之后，nginx 找不到文件。

vue-cli@3

在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容：

...
module.exports = {
 baseUrl: isProd
  ? '/baseXXX/'
  : '/',
  ....
}

这里需要注意的是 dev 环境下不需要添加 baseUrl 。

vue-cli@2

针对 非 vue-cli@3 生成的项目，你如果不关心 webpack 里面是如何实现的，你只需要找到 config/index.js ， 修改其中的 build 中的 assetsPublicPath 即可。

为了验证一下是否可行，你可以本地 build 一下，然后查看 dist/index.html 中引用的 js css 文件的路径是否携带上你刚刚设置的 assetsPublicPath 即可。

而关心为啥这样设置就可以的同学们，继续看 build/webpack.base.conf.js 文件，

非 production mode 下，是在config/index.js 中设置的，这里的 publicPath 默认是

总结

以上所述是小编给大家介绍的nginx 部署 vue 项目找不到js css文件的解决方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 使用nginx同域名下部署多个vue项目并使用反向代理的方法

    效果 目前有 2 个项目(project1, project2),还有一个 nginx 自带的 index.html,我添加了对应的链接代码(稍后粘贴出来),为了统一管理子项目的路由. 我期望实现下面的效果(假设 ip: localhost,port: 8080): http://localhost:8080/ 进入最外层的 index.html http://localhost:8080/project1 进入项目一 http://localhost:8080/project2 进入项目二 废

  • 解决vue项目nginx部署到非根目录下刷新空白的问题

    1.修改config/index.js 2.修改路由route/index 3.后台配置nginx 以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 详解vue通过NGINX部署在子目录或者二级目录实践

    1.修改 router/index.js 添加一行 base: 'admin', 2.然后修改 config/index.js 增加一行 const assetsPublicPath = '/admin/' 然后修改 下面两处assetsPublicPath 的值为定义的变量 3.部署时,通过NGINX的反向代理 首先,给需要部署的项目定义一个 NGINX 的 server server { listen 8001; location / { # vue h5 history mode 时配置

  • vue打包使用Nginx代理解决跨域问题

    vue 在开发环境,涉及跨域,就在本地配置了代理,但是部署到服务器上,就不行了. 解决方法有一下几种 服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址,再build 推荐 使用nginx配置反向代理,这样就可以在前端彻底解决跨域问题. vue index.js文件源码 'use strict' // Template version: 1.2.7 // see http://vuejs-templates.github.io/webpack for

  • vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变过程(推荐)

    vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变过程(推荐)

    找到nginx多网站配置文件:类似 nginx/sites-available/www.baidu.com server { listen 80; index index.html index.htm index.nginx-debian.html; server_name www.baidu.com; location / { root /mnt/www/www.baidu.com; try_files $uri $uri/ /index.html; } } 参考页面:https://rout

  • vue下使用nginx刷新页面404的问题解决

    nginx 是一个代理的服务器. 出现的问题:写好的页面通过nginx作为代理的服务器给别的同事看的时候发现了新写的页面打开就404,并且从其他页面跳转可以看到但是刷新页面就404. 解决方法: 在文件中的nginx.conf文件中修改,代码如下 server { listen YYYY; //自己设置的端口号 server_name 192.168.XXX.XXX; //在黑窗口下ipconifg后出现的IPv4地址复制 location /{ root E:/website_wap/dist

  • nginx 部署 vue 项目找不到js css文件的解决方法

    很多时候 npm run build 之后, index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件. vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容: ... module.exports = { baseUrl: isProd ? '/

  • Nginx部署vue项目和配置代理的问题解析

    Nginx部署vue项目和配置代理的问题解析

    1.nginx安装和启动 # 安装nginx sudo apt-get install nginx # 启动 sudo service nginx start 验证安装 # 安装完成后使用nginx -v检查,如果输出nginx的版本信息表明安装成功 nginx -v # 如果输出类似于这样的版本号等,证明安装完成 nginx version: nginx/1.14.0 (Ubuntu) 2.修改nginx配置文件,部署项目 查看nginx的配置,linux系统下的配置文件通常会存放在/etc目

  • 五步教你用Nginx部署Vue项目及解决动态路由刷新404问题

    目录 步骤一:改端口 步骤二: 打包 步骤三:将dist文件夹上传到服务器上 步骤四:修改nginx.conf(重中之重) 步骤五:重启nginx 总结 期末月前本来部署过一次,昨天部署的时候发现又给忘了,而且出了很多问题,在这统一汇总一下. 步骤一:改端口 在vue.config.js下的devServer把host改成服务器的地址 步骤二: 打包 用npm run build打包,最后是这样的,并且目录下多了个dist文件夹 步骤三:将dist文件夹上传到服务器上 我用的xshell,没办法

  • Docker镜像+nginx 部署 vue 项目的方法

    一.打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹 yarn build / npm run build 此时根目录会多出一个文件夹:dist文件夹,里面就是我们要发布的东西. 如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目. 二.获取nginx 镜像 nginx 是一个高性能的HTTP和反向代理服务器,此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像. 在终端输入: docker pull nginx 即可以获取到ngin

  • ubuntu中利用nginx部署vue项目的完整步骤

    ubuntu中利用nginx部署vue项目的完整步骤

    目录 1.安装nginx 2.打包上传vue项目到服务器 配置nginx 访问vue项目 常见错误 总结 1.安装nginx 更新源列表 apt-get update 安装nginx apt-get install nginx 检查nginx是否安装,输入如下命令后若出现版本号则安装成功 nginx -v 启动nginx server nginx restart 在浏览器输入ip地址,若出现如下页面则启动成功 2. 打包上传vue项目到服务器 打包 我的项目使用的是vs code,在终端输入如下

  • 服务器使用Nginx部署Vue项目

    服务器使用Nginx部署Vue项目

    目录 一.安装Nginx 二.部署vue 首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6 一.安装Nginx 1. 使用XShell连接我们的服务器 2. 配置 EPEL源 sudo yum install -y epel-release sudo yum -y update 3. 安装Nginx sudo yum install -y nginx 以下的内容需要记住,特别是配置文件安装成功后,默认的网站目录为: /usr/share/nginx/h

  • 利用nginx部署vue项目的全过程

    利用nginx部署vue项目的全过程

    首先需要在服务器里下载nginx, apt-get install nginx 检查nginx是否安装,输入如下命令后若出现版本号则安装成功 nginx -v 然后启动nginx server nginx restart 如果有如下报错,则按照它的提示下载相关插件 我这里下载了2次不同的插件.直到运行server nginx restart指令成功 此时打开浏览器,输入你的服务器ip,就可以看到nginx启动成功 之后进行Vue项目打包: 在你一般输入运行npm run dev的地方输入npm

  • nginx部署vue项目的详细图文教程

    nginx部署vue项目的详细图文教程

    首先需要在服务器里下载nginx, apt-get install nginx 检查nginx是否安装,输入如下命令后若出现版本号则安装成功 nginx -v 然后启动nginx server nginx restart 如果有如下报错,则按照它的提示下载相关插件 我这里下载了2次不同的插件.直到运行server nginx restart指令成功 此时打开浏览器,输入你的服务器ip,就可以看到nginx启动成功 之后进行Vue项目打包: 在你一般输入运行npm run dev的地方输入npm

  • vue项目启动出现cannot GET /服务错误的解决方法

    上午做了项目,中午吃完饭后回来再跑一次服务器, 出现 Cannot GET/: 控制台中并没有报错:npm run dev命令行窗口也没有报错. 原因 在网上查了一堆,发现这个问题还挺多呢,而且各个回答的解决方式都竟然有许多不同- 于是把能改的地方都改了-(基本上相当于将配置信息改回来) 关闭 history 模式 关闭history模式,用/#/路由的方式开启,(history模式要跑在服务端里面): 更改端口号 更改端口号(没改的话打开原端口号自动加上登陆次数) 在 webpack.base

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

随机推荐