express的安装与使用

express

1. express是一个服务器 node里面的

express安装

需要先安装node，然后安装npm

Vue项目build打包后如何运行

1.全局安装express-generator生成器。

express-generator是express新版本分离出来的命令工具，想要使用express命令必须装这个依赖。

npm install express-generator -g // 也可使用cnpm比较快

建立软连接： ln -s /usr/local/software/node/bin/express /usr/local/bin/

部署vue项目

2.创建一个express项目。

express expressName // expressName是项目名

3.进入项目目录，安装相关项目依赖。

cd expressName

npm install // 或cnpm install

4.将Vue build后生成的dist文件夹下的所有文件复制到express项目的publick文件夹下面，在当前目录下然后运行 npm start 来启动express项目。

5.打开浏览器，输入localhost:3000就可以看到效果了。

备注：这个3000是你自己设置的端口号，如果你设置888，那么你就要输入localhost:888

Linux安装：需要配置软连接

1. npm install -g express-generator #需先安装express-generator
2. npm install -g express
3. sudo ln -s /usr/local/software/node-v14.16.0-linux-x64/bin/express /usr/local/bin/express

/usr/local/software/node-v14.16.0-linux-x64/bin/express 指软件的运行命令位置

/usr/local/bin/express 连接到全局的运行位置

express修改端口号

我们创建express项目，启动后默认是3000端口，此时我们可以这样自定义端口

打开构建的项目中的app.js

添加代码

​ process.env.PORT = 2000;

解决vue项目 build之后资源文件找不到的问题

问题描述：使用vue-cli脚手架工具生成的vue项目，使用npm run build后生成的文件直接双击打开白屏一片。

第一步：修改build文件夹下utils.js，在以下位置加入

  if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader',
      //用于解决build后静态文件路径找不到的问题(新加的代码)
      publicPath: '../'
    })
  } else {
    return ['vue-style-loader'].concat(loaders)
  }

第二步：修改config文件夹下的index.js文件，在以下位置进行修改，注意是build对象中：

  build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),
 
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  //用于解决build后文件路径找不到的问题(修改为./)
  assetsPublicPath: './',

后台启动

nohup npm start >logs.txt 2>& 1 & exit
然后再按回车

解决vue打包部署到express后刷新页面丢失的问题

https://blog.csdn.net/qq_21522331/article/details/107546230

一、在express项目中安装中间件npm install --save connect-history-api-fallback
二、在app.js中引用中间件
var history = require(‘connect-history-api-fallback’);
app.use(history());

run build 报错

报错Rule can only have one resource source (provided resource and test + include + exclude) in

查了一下是webpack版本冲突，

卸载已安装的webpack

npm uninstall webpack

再安装低版本的webpack

npm install webpack@^4.0.0 --save-dev

安装这个可以查看详细报错。

npm install --save-dev mini-css-extract-plugin //在项目开发依赖中安装