vue搭建项目时遇到的一些问题记录

最新推荐文章于 2024-03-29 15:50:56 发布

Eva_大黎

最新推荐文章于 2024-03-29 15:50:56 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： vue 实战打包 vue-cli 搭建项目

本文链接：https://blog.youkuaiyun.com/qq_36687640/article/details/78563405

vue.js 专栏收录该内容

1 篇文章

订阅专栏

本文记录了使用vue-cli搭建项目时遇到的问题及解决方案，包括如何避免ESlint严格检查，修改assetsPublicPath以适应本地查看打包文件，设置开发模式下的跨域代理，以及配置开发环境和发布环境的接口地址差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、用vue-cli模板搭建项目时，在选项 Use ESlint to lint your code（使用ESlint规范代码）的是时候记得填 no（对于小菜鸟），否则多个空格都会报错。

2、创建完成后建议首先修改一下配置文件 config>index.js

修改build 配置参数：修改assetsPublicPath为 ' ./ '（原本为 ' / '）

如图：

是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

3、开发模式下跨域代理：

打开 config>index.js

在dev 里面添加 proxyTable

4、开发环境和发布环境配置不同的接口地址

4.1首先找到

/config/dev.env.js
/config/prod.env.js

4.2 这两个文件就是针对生产环境和发布环境设置不同参数的文件。

我们打开dev.en.js文件。代码如下：

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"//localhost:8880/api/"' //配置开发环境接口地址
});

打开 prod.env.js 代码如下：

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"http://pile.gantangerbus.com/wxif/"' //发布环境接口地址
};

4.3分别配置好之后就可以在代码中调用了：

//在需要调用接口的组件使用就可以了 
var root = process.env.API_ROOT
//或者可以在全局定义一个全局变量 
var GlobalROOT = process.env.API_ROOT