vue-cli部署打包后的dist

安装express

1、安装node

2、安装express:npm install -g express

3、安装npm install -g express-generator

4、创建一个express工程:express helloworld

5、进入项目主目录:cd helloworld

6、安装必备包:npm install

7、启动express程序:npm start

8、最后把打包好的dist文件夹放在public文件夹里,访问http://localhost:3000/dist就能看的项目

vue-cli需要修改的地方

这里我还想提一下我中间遇到的坑:

在开发模式的时候我们会在这里配置proxyTable: {}, 配置他的原因是为了开发的时候解决前后端分离跨域问题的

这里一般我们会这么去写

记住,这么写是为了开发模式的时候方便前后分离开发,但是我们在打包的时候一定要去掉这一部分了,因为在同一环境同端口下是不存在跨域问题的了

而我这里打包的时候就把这一部分给去掉了

变成proxyTable: {}

与此同时,我们在开发模式的时候写axios时会在接口前面加一个"/api" 我们在打包之前同样要去掉,变成后端给的那种接口,这样在部署到服务器的时候,接口路径才能正确

接下来我们还需要修改一个地方 vue-router

vue单页面应用绝大部分都用到了这个vue-router,所以我们这里也需要做一部分修改就需要给 src/router/index.js添点东西,如下面:

猜你喜欢

转载自blog.csdn.net/lbPro0412/article/details/82225308