vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.75k stars 6.33k forks source link

yarn build 出来的 dist 不能发 http 请求 #2155

Closed weixiao-huang closed 6 years ago

weixiao-huang commented 6 years ago

Version

3.0.0-rc.12

Node and OS info

node v10.8.0, yarn v1.9.4

Steps to reproduce

利用 vue create 创建一个项目,除了 pwa 以外的选项我都选择了

$ vue create test-vue-cli-rc.12

Vue CLI v3.0.0-rc.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Nightwatch
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

$ cd test-vue-cli-rc.12
$ yarn add axios

然后在 src/views/Home.vue 中将 scripts 改为

import axios from 'axios';
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
  HelloWorld,
  },
  })
export default class Home extends Vue {
  async created() {
    const { data } = await axios.get('/api/v1/user');
    console.log(data);
  }
}

执行 yarn build,然后利用 serve 本地部署 dist

$ serve -s dist

然后打开 localhost:5000

What is expected?

我用 axios 在 /api/v1/user 发了一个 GET 请求,按理说能够在 console 或者 network 中看到这个请求并且显示请求错误或者 404

What is actually happening?

可以在 chrome 的 console 和 network 看到这个请求,但是并没有看到错误信息,而是显示 We're sorry but test-vue-cli-rc.12 doesn't work properly without JavaScript enabled. Please enable it to continue.

我执行 yarn serve 打开开发模式的 localhost:8080,可以在 console 中看到这个错误的请求:xhr.js?b50d:178 GET http://localhost:8080/api/v1/user 404 (Not Found)

我换了一个反向代理,利用 caddy 也产生了同样的发不出网络请求的问题

haoqunjiang commented 6 years ago

这是因为用 serve 做静态服务器的时候,http://localhost:5000/api/v1/user 是会返回 200 的,所以网络请求发送成功了。