您的位置:首页 > Web前端 > Vue.js

webpack打包vue项目之后怎么启动&注意事项

2019-06-10 16:06 686 查看

前端代码没有服务器可以部署到 express 服务器上运行
1.执行:npm run build
打包后生成dist文件夹

  1. 安装express-generator生成器

执行 $ npm install express-generator -g 进行安装

  1. 创建一个express项目

执行 $ express expressDemo (expressDemo是项目名)

expressDemo项目目录如下图:

作者:一行注释
来源:CSDN
原文:https://www.geek-share.com/detail/2745405143.html
版权声明:本文为博主原创文章,转载请附上博文链接!
打包后生成dist文件夹

  1. 安装express-generator生成器

执行 $ npm install express-generator -g 进行安装

  1. 创建一个express项目

执行 $3.1 express expressDemo (expressDemo是项目名)

expressDemo项目目录如下图:


4. 进入expressDemo目录,安装项目依赖

$ cd expressDemo

$ npm install

  1. 把dist目录下的所有文件复制到express项目的public文件夹下

    然后运行 $ npm start 启动expressDemo

打开浏览器,输入 http://localhost:3000 , 就可以看到效果了

需要注意的的事

如果发现文件路劲不对

1.使用mode:‘history’修改配置:

config里面的index.js找到env: require(’./prod.env’)模块(新版本build: {),将下面的assetsPublicPath: ‘/’ 改成assetsPublicPath: ‘./’ 然后将dist放在服务器上就可以运行了,建议使用这种方法,灵活改动少

2.不使用mode:‘history’

手动添加:dist包不是服务器跟目录,在index.htm里手动给js和css添加dist目录即可/dist/;

3.配置文件路径


打包后动画未执行,就是你npm run build生成的dist中动画未生效

解决方法:在vue项目中找到build文件夹下的vue-loader.conf.js,将extract:isProduction 改为extract:false
`

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: